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;
}

Edit this demo on CodePen 

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

Edit this demo on CodePen

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%; }

Edit this demo on CodePen

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%; }
}

Edit this demo on CodePen

Selected cell

Flickity adds is-selected class to the selected cell.

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

Edit this demo on CodePen

Previous & next buttons

Style and position previous & next buttons with CSS.

/* no circle */
.flickity-button {
  background: transparent;
}
/* big previous & next buttons */
.flickity-prev-next-button {
  width: 100px;
  height: 100px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}
/* hide disabled button */
.flickity-button:disabled {
  display: none;
}

Edit this demo on CodePen 

/* smaller, dark, rounded square */
.flickity-button {
  background: #333;
}
.flickity-button:hover {
  background: #F90;
}

.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
  left: -40px;
}
.flickity-prev-next-button.next {
  right: -40px;
}

Edit this demo on CodePen

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

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

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;
}

Edit this demo on CodePen 

/* 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;
}

Edit this demo on CodePen

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;
}

Edit this demo on CodePen