On desktop, resize the browser to toggle wrapping (infinite looping). Tap or click on the image to toggle fullscreen mode. Tap, click or pinch-zoom on the fullscreen image to zoom in and out. On laptops, you can zoom in by 1: holding ctrl and scrolling on the touchpad vertically and 2: pinch-zooming on the touchpad. You can pan an image via mouse, touch, pointer and wheel gestures (use 2 fingers on laptops to scroll with the wheel event). Sliders can be dragged via mouse, touch, pointer and wheel gestures (which are wrapped). In fullscreen mode, you can close the fullscreen modal by swiping the image vertically (if the image is completely zoomed out). Im using the same high res images for both the original and fullscreen sliders in the examples below but it's recommended to use optimized/low res for the original and high res for fullscreen for best performance.

Thumbnails

Resize the browser to 535px to see the horizontal thumbnail scrollbar. One cell is equal to one slide. Every image has to be the same size for best results.

Grouped Cells

I gave this slider a height of 300px then change it to 50vw when the viewport is 600px and below. Cells are grouped. Accomodates images of any size. I disable wrapping once the second to last image is visible (you have complete control over when and why wrapping happens). Resize the browser on desktop to see how the number of cells per slide change based on how many cells are visible inside the slider container.

Responsive

Column-based layout guaranteeing full image visibility per slide. The number of cells per slide is derived from the maxWidth value you assign it which is 220 in the example below. The minimum number of visible slides is set to 2. Every image has to be the same size for best results.

Hero

Slides are centered. One cell is equal to one slide. Accomodates images of any size.

Auto Scroll

Constant-speed horizontal scroll powered by a RAF (requestAnimationFrame) loop. You can easily apply auto scrolling to any slider. This Demo component uses grouped cells, wrapping and just the inline slider. Fullscreen mode is intentionally disabled here because I wanted to demonstrate a common yet simple use case which is a logo slider that auto scrolls.

Autoplay

Automatically advance to the next slide every 3 seconds.

Media Query

Full control over how many cells to show per slide.

Free Scroll

No snapping to cells after a drag gesture. Grouped cells, no wrapping and no fullscreen mode.