JSFiddle - React, Tailwind, and code Playground

by Deividas Krupstas

HTML

<link rel="stylesheet" href="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.css">
<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.js"></script>
    <ul class="bxslider">
        <li><img src="http://placehold.it/1000x500" title="Funky roots" /></li>
        <li><img src="http://placehold.it/1000x500" title="The long and winding road" /></li>
        <li><img src="http://placehold.it/1000x500" title="Happy trees" /></li>
        <li><img src="http://placehold.it/1000x500" title="Funky roots" /></li>
        <li><img src="http://placehold.it/1000x500" title="The long and winding road" /></li>
        <li><img src="http://placehold.it/1000x500" title="Happy trees" /></li>
    </ul>

JavaScript

var slider = $('.bxslider').bxSlider();

var widthMatch = matchMedia("all and (max-width: 767px)");
var widthHandler = function(matchList) {
    if (matchList.matches) {
        slider.reloadSlider({
            minSlides: 1,
            maxSlides: 1,
            slideWidth: 500,
            slideMargin: 10
        }) 
    } else {
        slider.reloadSlider({
            minSlides: 4,
            maxSlides: 4,
            slideWidth: 500,
            slideMargin: 10
        })
    }
};
 
widthMatch.addListener(widthHandler);
widthHandler(widthMatch);