JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
</section>

SCSS

$c1: #3a8999;
$c2: #e84a69;

.slider {
    width: auto;
    margin: 30px 50px 50px;
    outline: 1px solid grey;
}

.slick-slide {
    background: $c1;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-center:after {
    content: ' with .slick-center'
}

.slick-slide:nth-child(odd) {
     background: $c2;
}

JavaScript

var $slides = $(".slider").children();

$(".slider")

	.on("init", function(e,slick) {

    $("body").prepend("Shown: " + slick.options.slidesToShow );
    $("body").prepend( "<br>" );
    $("body").prepend("Slides: " + slick.slideCount );

	})
  
  .slick({
            mobileFirst: true,
            adaptiveHeight: true,
            responsive: [{
                breakpoint: 576,
                settings: {
                    slidesToShow: slidesToShow($slides.length, 3),
                    slidesToScroll: 1,
                    centerMode: true,
                    centerPadding: '0'
                }
            },{
                breakpoint: 768,
                settings: {
                    slidesToShow: slidesToShow($slides.length, 5),
                    centerMode: true,
                    centerPadding: '0'
                }
            }]
        });
        
function slidesToShow(total, max) {
  var nearestOdd = 2 * Math.round(total / 2) - 1;
  return total > max ? max : nearestOdd;
};
        
        $(".slider").on('click', '.slick-slide', function (e) {
            e.stopPropagation();
            var index = $(this).data('slick-index');
            if ($(".slider").slick('slickCurrentSlide') !== index) {
                $(".slider").slick('slickGoTo', index);
            }
        });