Visit https://flickity.metafizzy.co/options to learn more about Flickity Carousel options.
Draggable – Active automatically when there are two + slides. Uncheck to lock slides in place.
Free Scroll – Lets visitors glide freely without slides snapping. Combine with Wrap Around for endless scrolling.
Contain – Check this (and Free Scroll) to keep a horizontal scroller inside its frame.
Previous / Next Buttons – Show or hide the arrow buttons.
Page Dots – Show or hide the dot navigation.
Arrow Shape – Paste a custom SVG path for the arrows, The default is “M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z”.
Wrap Around – Loops from the last slide back to the first for infinite scroll.
Group Cells:
- true — group whatever fits in view.
- number/percent — group that many slides.
- false — no grouping.
Auto Play:
- true — advances every 3 s.
- number — delay in ms.
- false — off.
Pause Auto Play on Hover – Stops autoplay while the cursor is over the slider.
Adaptive Height – Slider height adjusts to the current slide.
Watch CSS – Lets you turn the slider on/off with CSS rules.
As Nav For – Enter the class name of another slider this one should control.
Drag Threshold – Pixels the pointer must move before dragging starts (default 3).
Selected Attraction – Higher value = faster snap to the selected slide (default 0.025).
Friction – Higher value = stickier, slower motion (default 0.28).
Free Scroll Friction – Motion feel while in free-scroll (default 0.075).
Lazy Load – Loads images only as they come into view.
Initial Index – Slide number that shows first (0 = first slide).
Accessibility – Enables keyboard tabbing and arrow-key navigation.
Set Gallery Size – Matches slider height to the tallest slide. Uncheck if you size it with CSS.
Resize – Lets the slider recalculate its size on window changes. Uncheck if CSS handles it.
CSS Height – Fixed height for the slider (e.g., 300px or 50%). Leave blank for automatic.
Use Full Image Size – Displays images at their original dimensions.
Cell Alignment– Choose how slides line up inside the frame (left, center, right).
Main Selector – CSS selector for the slider container (default .main-carousel).
Cell Selector – CSS selector for each slide (default .carousel-cell).
Percent Position – Positions slides with percentages for better responsiveness.
Right-to-Left – Makes the slider move from right to left.