Cards
Slide 1
Drag the slider, or use the arrows and dots below. These cards hold text of different lengths on purpose: with Slide alignment set to stretch they all match the tallest one, while start, center and end let each card keep its natural height.
Slide 2
Each slide is a slot — drop any content inside.
Slide 3
Slides per view adapt to mobile, tablet and desktop, and the layout is pure CSS — nothing is re-measured in JavaScript when the window resizes.
Slide 4
States like active, prev, next and visible are exposed for styling.
Slide 5
Loop mode keeps the slider going endlessly, and autoplay can pause on hover without losing its place.
Slide 6
Everything is themeable with CSS variables on .fe-slider.
Autoplay
Slide 1
Drag the slider, or use the arrows and dots below. These cards hold text of different lengths on purpose: with Slide alignment set to stretch they all match the tallest one, while start, center and end let each card keep its natural height.
Slide 2
Each slide is a slot — drop any content inside.
Slide 3
Slides per view adapt to mobile, tablet and desktop, and the layout is pure CSS — nothing is re-measured in JavaScript when the window resizes.
Slide 4
States like active, prev, next and visible are exposed for styling.
Synced
Slide 1
Drag the slider, or use the arrows and dots below. These cards hold text of different lengths on purpose: with Slide alignment set to stretch they all match the tallest one, while start, center and end let each card keep its natural height.
Slide 2
Each slide is a slot — drop any content inside.
Slide 3
Slides per view adapt to mobile, tablet and desktop, and the layout is pure CSS — nothing is re-measured in JavaScript when the window resizes.
Slide 4
States like active, prev, next and visible are exposed for styling.
Slide 5
Loop mode keeps the slider going endlessly, and autoplay can pause on hover without losing its place.
Slide 6
Everything is themeable with CSS variables on .fe-slider.
Slide 7
Drag the slider, or use the arrows and dots below. These cards hold text of different lengths on purpose: with Slide alignment set to stretch they all match the tallest one, while start, center and end let each card keep its natural height.
Slide 8
Each slide is a slot — drop any content inside.
Slide vertical & thumbnails
Slide alignment: start and auto scroll
Slide 1
Drag the slider, or use the arrows and dots below. These cards hold text of different lengths on purpose: with Slide alignment set to stretch they all match the tallest one, while start, center and end let each card keep its natural height.
Slide 2
Each slide is a slot — drop any content inside.
Slide 3
Slides per view adapt to mobile, tablet and desktop, and the layout is pure CSS — nothing is re-measured in JavaScript when the window resizes.
Slide 4
States like active, prev, next and visible are exposed for styling.
Slide 5
Loop mode keeps the slider going endlessly, and autoplay can pause on hover without losing its place.
Slide 6
Everything is themeable with CSS variables on .fe-slider.
Controls outside the slider
Slide 1
Drag the slider, or use the arrows and dots below. These cards hold text of different lengths on purpose: with Slide alignment set to stretch they all match the tallest one, while start, center and end let each card keep its natural height.
Slide 2
Each slide is a slot — drop any content inside.
Slide 3
Slides per view adapt to mobile, tablet and desktop, and the layout is pure CSS — nothing is re-measured in JavaScript when the window resizes.
Slide 4
States like active, prev, next and visible are exposed for styling.