Slide options
Options affecting how slides look like.
Slide options
Control how slides will look like. Remove the gap, use ratio to control perfect responsive layout, add shadows to the sliding area and remove the automatic snapping.
Slide layout
Default slides
Default slide behavior with no settings. With a 1rem gap between slides
Slides with no gap .slider-item-nogap
Removes the gaps between slides
Slide ratio
Enable ratio .slider-item-ratio
Slides with ratio enabled using .slider-item-ratio giving a default ratio 2:1
21:9 ratio .slider-item-ratio .slider-item-ratio-21x9
Slides with ratio enabled using .slider-item-ratio and .slider-item-ratio-21x9 giving a ratio of 21:9
Other ratios
.slider-item-ratio-16x9.slider-item-ratio-1x1.slider-item-ratio-2x1.slider-item-ratio-32x9.slider-item-ratio-4x3.slider-item-ratio-3x4
Slide behavior
Slides with no snapping .slider-item-nosnap .slider-nav-scrollbar
When navigating using touch, keyboard, trackpad on laptops, tilting mouse wheel or using scrollbar, the items does not snap, but slides freely.
Gives a less controlled sliding experience where the slides can be scrolled to any position.
Also comes in a version that only affects touch devices which in many cases makes most sense. When using touch to slide the carousel, the items will not snap to a specific position.
HINT: On desktops, use the scrollbar and on laptop use your trackpad to see the effect
Slides with no snapping on touch devices.slider-item-nosnap-touch
When navigating using touch enabled devices only (@media (hover: none){})
Gives a less controlled sliding experience where the slides can be scrolled to any position when not using navigation arrows
HINT: Only works on touch devices like phones and tables or in i.e. Chrome developer mode in mobile view
Slide debugging
Slides with minimum layout .slider-item-helper
For debugging and testing. Adds a minimum height to a slide, gives it a grey background and centers + justify content