Overflow Slider Demos
Basic Demos
Pure CSS
No plugins applied. Using only CSS.
Mouse Dragging
Drag slides with mouse. Uses DragScrollingPlugin. These slides are clickable.
These slides are not clickable.
Scroll-snap emulation enabled.
Arrows
Display buttons to move slides. Uses ArrowsPlugin.
Arrows can move also one slide at a time with "movementType" set to "slide".
Scroll Indicator
Display scroll indicator. Uses ScrollIndicatorPlugin.
Dots
Display dots indicator. Uses DotsPlugin.
Fade
Display fade. Uses FadePlugin. Fade can be on both sides but having it only at end is more usable.
Autoplay (slide)
Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.
Autoplay (view)
Use autoplay and set delay. If user prefers reduced motion, autoplay does not execute.
Slide Contents
Perfectly Fitting Slides
Slides fill the container perfectly.
Varying Width Slides
Slides are not equal width.
Only Few Slides
Not enough slides to have a slider (on mobile has though).
CSS Trickery
Scroll Snapping (mandatory)
Force scrolling to snap to slide always.
Scroll Snapping (proximity)
Force scrolling to snap to slide not so strictly.
Entrance and Exit Animations (experimental)
Animate slides when they appear and disappear. Seem to only work on Chrome.
Real Life Usage
Filters
Display filter buttons in one line that overflows when necessary.
Grid On Desktop, Slider On Mobile
Display contents differently for different sized screens.
Full Width Slider
Allow slides to flow in full screen but center them accoring to your content. Uses FullWidthPlugin.
Synced Slider
Sync slides from thumbnails.
Autoplaying Hero
It's possible. Not saying you should.