Slick Slider with Thumbnails

by Frost819

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<div class="container">
    <p>Here is my header</p>
    <ul class="slickslide">
        <li>
            <img src="http://placehold.it/800x300/200&text=active"  title="img" alt="img" />
        </li>
        <li>
            <img src="http://placehold.it/800x300/300" title="img2" alt="img2" />
        </li>
        <li>
            <img  src="http://placehold.it/800x300/400" title="img" alt="img" />
        </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 src="http://placehold.it/150x100/200" />
            </li>
            <li>
                <img src="http://placehold.it/150x100/300" />
            </li>
            <li>
                <img src="http://placehold.it/150x100/400" />
            </li>
            <li>

                <img src="http://placehold.it/150x100/500" />
            </li>
            <li>
                <img src="http://placehold.it/150x100/600" />
            </li>
        </ul>
    </div>
    <hr/>
     <h3>Featured News</h3>

    <p>Proactively create adaptive schemas vis-a-vis multimedia based synergy. Energistically repurpose cost effective users before economically sound web services. Proactively aggregate fully tested ROI whereas superior benefits. Distinctively exploit mission-critical.</p>
</div>

CSS

.slick-slider {
    margin-bottom: 0;
    position:relative;
}
ul.slickslide {
    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;
}

.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;
}

.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: true,
        speed: 500,
        fade: false,
        slide: 'li',
        cssEase: 'linear',
        centerMode: true,
        slidesToShow: 1,
        variableWidth: true,
        autoplay: true,
        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');
});