No jQ Slider

A js slider with no dependencies and little extra job for the browser.

Examples

Simple usage

createSlider({ wrapper: "#simple .slider-wrapper", });

SLIDE 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem aut qui officiis ipsam voluptatem? Atque suscipit soluta, fuga iste magni ipsum expedita quia, quibusdam eos facilis veritatis ad aspernatur corporis!

SLIDE 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

SLIDE 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

SLIDE 4

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

visibleSlides, infinite nav and autoplay

createSlider({ wrapper: "#infinite-3-slides .slider-wrapper", infinite: true, autoplay: true, visibleSlides: 3, });

SLIDE 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem aut qui officiis ipsam voluptatem? Atque suscipit soluta, fuga iste magni ipsum expedita quia, quibusdam eos facilis veritatis ad aspernatur corporis!

SLIDE 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

SLIDE 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

SLIDE 4

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

SLIDE 5

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

SLIDE 6

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

SLIDE 7

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur rem eveniet rerum ipsam ut, magnam cupiditate maxime praesentium expedita voluptate, sequi, laudantium voluptatum illo facere quisquam omnis odio soluta debitis.

Responsive number of slides working on resize

createSlider({ infinite: false, autoplay: false, visibleSlides: 5, responsive: { 480: { visibleSlides: 1, }, 640: { visibleSlides: 2, }, 1024: { visibleSlides: 3, }, }, });
Demo coming soon