responsive slider based on swiperjs.

responsive-slider.js

import $ from 'jquery';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

$(function () {

    var mySwiper = null;

    // page load complete

    mySwiper = arrangeSwiper(mySwiper);
    
    // window resize

    $(window).resize( function (e) {
        mySwiper.destroy(false, true);

        arrangeSwiper(mySwiper);
    });
});

const arrangeSwiper = (_swiper) => {
    var width = $(window).width();

    if (width >= 680) {
        _swiper = new Swiper('.slider-2', {
            mode:'horizontal',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 3,
            spaceBetween: 0
        });
    } else if ( width >= 500 && width < 680 ) {
        _swiper = new Swiper('.slider-2', {
            mode:'horizontal',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 2,
            spaceBetween: 0
        });
    } else if (width < 500) {
        _swiper = new Swiper('.slider-2', {
            mode:'horizontal',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            spaceBetween: 0
        });
    }
    return _swiper;
}