SplideJS Carousel Demo

How to use:

Scroll vertically through the first full-screen carousel
When you reach the last slide, continue scrolling down to move to the next section
When you're at the first slide, scroll up to go to the previous section
Use the horizontal carousel below for side-to-side navigation

This page shows three things:

A vertical full‑screen carousel that releases the scroll on its edges.
A horizontal carousel (think “image gallery”).
A regular content block that does not slide.

Vertical Slide 1
Vertical Slide 2
Vertical Slide 3

Horizontal Carousel

Horizontal 1
Horizontal 2
Horizontal 3
Horizontal 4
Horizontal 5

Static Content Section

This part of the page behaves exactly like a normal web page – no Splide instance, no scroll‑locking, just plain HTML flow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

Continue scrolling – you’ll see the page scroll naturally after the vertical slider’s last slide and after the horizontal carousel as well.

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.

Additional Content

Here you can keep adding whatever you need – articles, footers, forms, …

SplideJS is a lightweight, flexible, and accessible slider/carousel library written in TypeScript. It provides a great alternative to SwiperJS with excellent performance and customization options.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing.