JSFiddle - React, Tailwind, and code Playground

by rinatoptimus

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<div class="container">
        <ul class="slickslide">
            <li>
                <!-- <img src="http://placehold.it/800x300/200&text=active"  title="img" alt="img" /> -->
                <a data-fancybox="gallery" href="http://placehold.it/800x300/200&text=active">
                    <img src="http://placehold.it/800x300/200&text=active"  title="img" alt="img" class="js-fancybox" data-fancybox-group="js-fancybox-button" />
                </a>
            </li>
            <li>
                <a data-fancybox="gallery" href="http://placehold.it/800x300/300">
                    <img src="http://placehold.it/800x300/300" title="img2" alt="img2" class="js-fancybox" data-fancybox-group="js-fancybox-button" />
                </a>
            </li>
            <li>
                <a data-fancybox="gallery" href="http://placehold.it/800x300/400">
                    <img  src="http://placehold.it/800x300/400" title="img" alt="img3" class="js-fancybox" data-fancybox-group="js-fancybox-button" />
                </a>
            </li>
            <!-- <li>
                <img src="http://placehold.it/800x300/500"  title="img2" alt="img2" />
            </li>
            <li>
                <img  src="http://placehold.it/800x300/600" title="img" alt="img" />
            </li> -->
        </ul>
        <div class="slick-thumbs">
            <ul>
                <li>
                    <img...

CSS

.container {
    position: relative;
    width: 76%;
}
.slick-slider {
    margin-bottom: 0;
    position:relative;
}
ul.slickslide {
    width: 69%;
    padding-left:0;
    max-width:100%;
}
.slick-slider .slick-track {
    min-width:100%;
}
ul.slickslide li img, .slick-dots button img {
    width:100%;
    height:auto;
}
.slick-dots {
    bottom:0;
    top:auto;
    left:auto;
    //right:auto;
    position:absolute;
    line-height:0;
    background:#000;

    max-width: 200px;
    right: -200px;
    top: 0;
    bottom: 0;
}

.slick-dots li, .slick-dots li button:before {
   /* width: 100px;
    height:100px; */
    margin:0;
    padding:0;
}
.slick-dots li {
    margin: 5px; 
    border:1px solid #ccc; 
    display:inline-block; 
    width:auto;
    height:auto;

    float: left;
    //float: none; // 1111
    display: block;
}

.slick-slider .slick-track {
    min-width:100%;
}
.slick-dots li button {
    margin:0;
    height:auto;
    width:100%;
    padding:0;

}

.slick-dots li button.tab { clear:both;   display:block;}
.slick-dots li button img { 
    width:100%; 
    /* max-width:80px;  */
    height:auto;   
}
.slick-dots li button:before {
    content:''; 
    border:1px solid #f00;
    display:block; 
    width:100%;  
    /*max-width:150px; */
    overflow:hidden; 
    float:none;  
    position:absolute;
    width:100%;
    height:100%;
}

.slick-thumbs {
    position:absolute;
    left: -9999px;
}

JavaScript

$().ready(function (e) {
            $('.slickslide').slick({
                dots: true,
                infinite: false,
                speed: 500,
                fade: false,
                slide: 'li',
                cssEase: 'linear',
                centerMode: true,
                slidesToShow: 1,
                variableWidth: true,
                autoplay: false,
                autoplaySpeed: 4000,
                responsive: [{
                    breakpoint: 800,
                    settings: {
                        arrows: false,
                        centerMode: false,
                        centerPadding: '40px',
                        variableWidth: false,
                        slidesToShow: 1,
                        dots: true
                    },
                    breakpoint: 1200,
                    settings: {
                        arrows: false,
                        centerMode: false,
                        centerPadding: '40px',
                        variableWidth: false,
                        slidesToShow: 1,
                        dots: true

                    }
                }],
                customPaging: function (slider, i) {
                    return '<button class="tab">' + $('.slick-thumbs li:nth-child(' + (i + 1) + ')').html() + '</button>';
                }
            });

            //$('.slick-thumbs').html('');
            //$('.slick-dots').appendTo('.slick-thumbs');
        });
        
        
        
        
$('.js-fancybox').fancybox({
         openEffect  : 'none',
         closeEffect : 'none',
         prevEffect : 'none',
         nextEffect : 'none',
         closeBtn  : true,
         arrows    : false,
         nextClick : false,
         helpers : {
          title : {
           type : 'inside'
          },
          buttons : {},
          thumbs : {
           width : 50,
           height : 50
          }
         },
         afterLoad : function() {
         ...