New! Infinite Scroll v3 · Back & refresh button friendly

Style

Cell style

Cell sizing

All sizing and styling of the cells are handled by your own CSS. The height of the carousel is set to the maximum height of the cells.

.carousel-cell {
  width: 100%; /* full width */
  height: 160px; /* height of carousel */
  margin-right: 10px;
}
.carousel-cell {
  width: 50%; /* half-width */
  height: 160px;
  margin-right: 10px;
}

Cells can be different sizes. You can use any unit you like: percent, pixels, etc.

.carousel-cell {
  width: 33%;
  height: 160px;
  margin-right: 10px;
}
.carousel-cell.size-180 { width: 180px; }
.carousel-cell.size-large { width: 75%; }

You can use media queries to show different number of cells for different breakpoints.

/* default full-width cells */
.carousel-cell {
  width: 100%;
  height: 160px;
  margin-right: 10px;
}

@media screen and ( min-width: 768px ) {
  /* half-width cells for larger devices */
  .carousel-cell { width: 50%; }
}

Selected cell

Flickity adds is-selected class to the selected cell.

.carousel-cell.is-selected {
  background: #ED2;
}

Previous & next buttons

Style and position previous & next buttons with CSS.

/* big buttons, no circle */
.flickity-prev-next-button {
  width: 100px;
  height: 100px;
  background: transparent;
}
.flickity-prev-next-button:hover {
  background: transparent;
}
/* arrow color */
.flickity-prev-next-button .arrow {
  fill: white;
}
.flickity-prev-next-button.no-svg {
  color: white;
}
/* hide disabled button */
.flickity-prev-next-button:disabled {
  display: none;
}
/* smaller, dark, rounded square */
.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #333;
}
.flickity-prev-next-button:hover {
  background: #F90;
}
/* arrow color */
.flickity-prev-next-button .arrow {
  fill: white;
}
.flickity-prev-next-button.no-svg {
  color: white;
}
/* position outside */
.flickity-prev-next-button.previous {
  left: -40px;
}
.flickity-prev-next-button.next {
  right: -40px;
}

Previous & next buttons have :focus style. Click on a carousel, then hit TAB to see it.

/* already included in flickity.css */
.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

Page dots

Style and position page dots with CSS.

/* position dots in carousel */
.flickity-page-dots {
  bottom: 0px;
}
/* white circles */
.flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid white;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: white;
}
/* position dots up a bit */
.flickity-page-dots {
  bottom: -22px;
}
/* dots are lines */
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}

Add a carousel :focus style style to aid accessibility. When focused, users can navigate the carousel with their keyboard.

.flickity-enabled:focus .flickity-viewport {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
}