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

NOTICE: You are using a device that does not have touch as primary input and can therefore not see the effect...
YEAH: You are using a device that have touch as primary input!

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

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5
  • Slide 6