Snake

Vanilla JS responsive slider

Separate settings per breakpoint.

CSS3 transforms. Arrows and dots.

Swipe and desktop mouse dragging.

Autoplay and infinite looping.

Slider syncing.

Getting Started

Move the /snake folder into your project.

Add snake.css, snake-theme.css and snake.js in your <head/>

<link rel="stylesheet" href="snake/snake.css">
<link rel="stylesheet" href="snake/snake-theme.css">
<script src="snake/snake.js"></script>

Set up your HTML markup

<div class="some-class">
  <div>slide 1</div>
  <div>slide 2</div>
  <div>slide 3</div>
</div>

Initialize your slider in a script tag

new Snake('.some-class');

Single Item

0
1
2
3
4
5
6
7
8
new Snake('.single-item');

Multiple Items

0
1
2
3
4
5
6
7
8
new Snake('.multiple-items', {
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 2,
});

Responsive Display

new Snake('.responsive', {
    mobileFirst: true,
    swipe: true,
    speed: 300,
    responsive: [
        {
            breakpoint: 400,
            settings: {
                initialSlide: 2,
                slidesToScroll: 1,
                slidesToShow: 2,
            }
        },
        {
            breakpoint: 700,
            settings: {
                initialSlide: 1,
                slidesToScroll: 2,
                slidesToShow: 3,
            }
        },
        {
            breakpoint: 1000,
            settings: {
                initialSlide: 0,
                slidesToScroll: 3,
                slidesToShow: 4,
            }
        },
    ],
});

Arrows & Dots

0
1
2
3
4
5
6
7
8
new Snake('.arrows-and-dots', {
    infinite: false,
    speed: 300,
    dots: false,
    arrows: false,
    mobileFirst: true,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                dots: true,
                arrows: true,
            }
        }
    ]
});

Autoplay

new Snake('.autoplay', {
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 2,
    autoplay: true,
    autoplaySpeed: 5000,
});

Center Mode

0
1
2
3
4
5
6
7
8
new Snake('.center-mode', {
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '60px',
    responsive: [
        {
            breakpoint: 700,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
            }
        }
    ]
});

Adaptive Height

Lotus flowers
Lotus leaves and flowers
Water lily
new Snake('.adaptive-height', {
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 2,
    adaptiveHeight: true,
});

Slider Syncing

0
1
2
3
4
5
6
7
8


0
1
2
3
4
5
6
7
8
    new Snake('.slider', {
    draggable: false,
    dots: false,
    asNavFor: '.nav',
    speed: 300,
});

new Snake('.nav', {
    mobileFirst: true,
    swipe: true,
    speed: 300,
    asNavFor: '.slider',
    centerMode: true,
    centerPadding: '60px',
    responsive: [
        {
            breakpoint: 700,
            settings: {
                initialSlide: 0,
                slidesToScroll: 1,
                slidesToShow: 3,
            }
        },
    ],
});

Download Snake

View on GitHub Download Now