Grids

One of the most powerful features of Slider.js is that it will slice up the slide for you. You simply specify how many rows and columns you want and that's all!

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Slider.js Demo

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney

Controls

Sliders made with Slider.js have support out-of-the-box for controls that a slider might need. Ticker, arrows, play/pause button, pagination... you name it. Add the HTML and it just works.

1

2

3

4

5

6

This is a demonstration of Slider.js

This box sits outside of the slides, and after every transition the content specific to the current slide...

... is animated in.

Also, there are many ways that you can use the ticker.

Here we are just indicating on which slide we are on, and when we click on a ticker we go to that slide.

The example below shows another cool way of using tickers!

Outer contents, timing

This demo is a really good example of the flexibility of Slider.js. Notice everything that's going on here - both slides, the current and next one have transition animations. When the transition ends, a content box, that sits outside of the slide is animated in. Also notice that every slide has different text, just for it.

A gallery

Slider.js is not limited to sliders! See what happens if we put a thumbnail inside each ticker? We get a gallery, and the code required for it is ridiculously small.

You've seen all demos, why not check out some examples or the video tutorials? You will get a good idea of how easy it is to make awesome sliders with Slider.js