JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<link rel="stylesheet" href="https://rawgit.com/stevenwanderski/bxslider-4/master/jquery.bxslider.css">
<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/jquery.bxslider.js"></script>
<ul class="bxslider">
    <li>
        <img src="http://estet.mnkk.ru/img/slide1.png" />
    </li>
    <li>
        <img src="http://estet.mnkk.ru/img/slide2.png" />
    </li>
    <li>
        <img src="http://estet.mnkk.ru/img/slide3.png" />
    </li>
    <li>
        <img src="http://estet.mnkk.ru/img/slide4.png" />
    </li>
    <li>
        <img src="http://estet.mnkk.ru/img/slide5.png" />
    </li>
</ul>

CSS

.el_0 {
    width: 90px !important;
}
.el_1 {
    width: 150px !important;
}
.el_2 {
    width: 300px !important;
}
.bxslider li {
 width: auto !important;
}

JavaScript

$(document).ready(function () {
    console.clear();
    var imgs, map = [],
        first = true;
    var sliderLoad = function (i) {
        imgs = $('.bxslider li').find('img');
        var start = (imgs.length/3);
        console.log(start);
        init(imgs[start]);
        remap();
    };
    var init = function (el) {
        if (!first) {
            return;
        }
        var f = false;
        for (var i = 0, c = imgs.length; i < c; ++i) {
            if (imgs[i].isSameNode(el)) {
                f = i;
                map.push(imgs[i]);continue;
            }
            if (f !== false) {
                map.push(imgs[i]);
            }
        }
        for (i = 0; i < f; ++i) {
            map.push(imgs[i]);
        }
        first = false;
    };
    var remap = function() {
    console.clear();
        var i,j, val;
        for(i = 0, j = 4; i< imgs.length; ++i) {
            if(i > 5) {             
               map[i].removeAttribute('class');continue;
            }
            val = (i >1) ? j: i;
            map[i].setAttribute('class', 'el_'+val);
            --j;            
            console.log(map[val]);
        } 
            console.log(map, map.length);
        
    }
    var sliderNext = function (el, oldi, i) {
        var t = map.shift();
        map.push(t);
        remap();
    };
    var sliderPrev = function (el, oldi, i) {
        var t = map.pop();
        map.unshift(t);
        remap();
    };
    $(function () {
        $('.bxslider').bxSlider({
            minSlides: 2,
            nextText: '<img src="http://estet.mnkk.ru/img/next.png"/>',
            prevText: '<img src="http://estet.mnkk.ru/img/prev.png"/>',
            captions: true,
            pager: false,
            maxSlides: 5,
            slideWidth: 150,
            moveSlides: 1,
            slideMargin: 5,
            onSliderLoad: sliderLoad,
            onSlideNext: sliderNext,
            onSlidePrev: sliderPrev

        });
    });

});