Swiper

Touch enabled minimalistic slider written in vanilla JavaScript.

• Autoplay
• RTL support
• Lazyload images support
• Stop sliding on hover

Installation

npm install basic-swiper --save

Using:

    import { swiper } from 'basic-swiper.js';

    document.addEventListener('DOMContentLoaded', () => {
        const slider = document.querySelector('.js_slider');
        swiper(slider, {
            // options
        });
    });

Development

To install dev dependencies run:

npm install

To make a full new build run:

npm run build

Markup

The default classes can be overridden when instantiating swiper.

<div class="js_slider">
    <div class="js_frame">
        <ul class="js_slides">
            <li class="js_slide">1</li>
            <li class="js_slide">2</li>
            <li class="js_slide">3</li>
            <li class="js_slide">4</li>
            <li class="js_slide">5</li>
            <li class="js_slide">6</li>
        </ul>
        // Prev / Next buttons
        <span class="js_prev prev"></span>
        <span class="js_next next"></span>
    </div>
    // Pagination
    <ul class="js_dots"></ul>
</div>

CSS

.slider {}

.frame {
    position: relative;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

.slides {
    display: inline-block;
}

li {
    position: relative;
    display: inline-block;
}
li img {
    max-width: 100%;
}

.prev, .next {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: block;
    cursor: pointer;
}

.next {
    right: 0;
}

.prev {
    left: 0;
}

.next svg, .prev svg {
    width: 25px;
}

.dots {
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    width: 100%;
}

.dots > li {
    width: 7px;
    height: 7px;
    border: 1px solid #fff;
    opacity: 0.5;
    margin: 0 5px;
    display: inline-block;
    border-radius: 100%;
    background-color: #000;
    cursor: pointer;
}

.dots > li.active {
    background-color: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
    width: 12px;
    border-radius: 4px;
    opacity: 1;
}

Options

slidesToScroll	default: 1
slidesPerView	default: 1 (number of visible slides)
enableMouseEvents	default: true
rewind	default: false
slideSpeed (ms)	default: 300
rewindSpeed (ms)	default: 600
snapBackSpeed (ms)	default: 200
ease (cubic bezier easing functions: http://easings.net/de)	default: 'ease'
classNameFrame	default: 'js_frame'
classNameSlideContainer	default: 'js_slides'
classNameDotsContainer	default: 'js_dots'
classNamePrevCtrl	default: 'js_prev'
classNameNextCtrl	default: 'js_next'
classNameActiveSlide	default: 'active'
classNameDisabled	default: 'disabled'
autoplay	default: false
direction	default: 'ltr'

Events

before.swiper.init	fires before initialisation (first in setup function)
after.swiper.init	fires after initialisation (end of setup function)
before.swiper.slide	fires before slide change | arguments: currentSlide, nextSlide
while.swiper.sliding	fires while swiper is transiting between slides
after.swiper.slide	fires after slide change | arguments: currentSlide
before.swiper.destroy	fires before the slider instance gets destroyed
after.swiper.destroy	fires after the slider instance gets destroyed
on.swiper.resize	fires on every resize event
on.swiper.touchstart	fires on every slider touchstart event
on.swiper.touchmove	fires on every slider touchmove event
on.swiper.touchend	fires on every slider touchend event

Browser Support

• Chrome
• Safari
• FireFox
• Opera
• Internet Explorer 10+