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 500px 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. Grouped cells. Accomodates images of any size. I removed the fullscreen feature since it doesn't make sense here. All of the code for the autoplay feature is inside a small useEffect hook which can be copied and pasted inside any custom slider.

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.