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