Swiper Demos

Demos

You can download all these demos and hook into the code from GitHub here.

Default

Slide with HTML

You can put any HTML inside of slide with any layout, not only images, even another Swiper!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tortor vitae neque luctus a tempor lacus pretium. Mauris eget ligula at justo molestie cursus. In vitae sem id neque pharetra luctus non vel felis.

Aliquam ut laoreet ligula. Quisque vehicula lectus nec orci viverra porttitor. Donec sodales lectus sit amet nunc congue ut mattis augue rhoncus.

Vertical Mode

Swipe to the Top or to the Bottom

Slide 2

Keep swiping

Slide 3

The last one

Dynamic Slides

This demo shows how easy and fun to work Slides API.

Slide 1

Swipe to the Top or to the Bottom

Slide 2

Keep swiping

Slide 4

The last one

Slide 5

The last one

Append slide Prepend slide Swap 1st and 2nd slides Insert after first slide Remove first slide Remove last slide Remove 2nd slide

Scroll Container

This demo also uses a Scrollbar plugin.

Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!

Here goes some text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.

Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod

Here goes wide image

You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!

Free Mode

has no fixed positions

Fluid-Mode Enabled

When you release the slide, it keep moving for a while

Slide 3

Keep swiping

Slide 4

Keep swiping

Slide 5

The last one

Carousel Mode

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Carousel & Loop mode. Infinite Scrolling

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Nested Swipers. Vertical Swiper inside of horizontal

Slide 1

Vertical Slide 1

Vertical Slide 2

Vertical Slide 3

Vertical Slide 4

Vertical Slide 5

Vertical Slide 6

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

More complex. Nested Swipers + Carousel Mode + Loop Mode

Slide 1

Slide 2

Slide 3

Vertical Slide 1

Vertical Slide 2

Vertical Slide 3

Vertical Slide 4

Vertical Slide 5

Vertical Slide 6

Slide 5

Slide 6

Slide 7

Slide 8

Tabs (only external control)

Tab 1 Tab 2 Tab 3

Tabs Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tempus turpis ut tempus. Mauris dictum blandit lectus, a dictum erat dictum non. Etiam ultrices convallis interdum. Curabitur varius auctor enim, quis dictum nibh fringilla ut. Sed vel lacus ac odio molestie sodales quis sit amet lacus. Curabitur id porta eros. Fusce in varius nisi.