slick slider + fancybox

index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

<div class="slider slider-for">
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/1.jpg" data-caption="Caption #1">
            <img src="http://s.fotorama.io/1.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/2.jpg">
            <img src="http://s.fotorama.io/2.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/3.jpg">
            <img src="http://s.fotorama.io/3.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/4.jpg">
            <img src="http://s.fotorama.io/4.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/5.jpg">
            <img src="http://s.fotorama.io/5.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/6.jpg">
            <img src="http://s.fotorama.io/6.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/7.jpg">
            <img src="http://s.fotorama.io/7.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://s.fotorama.io/8.jpg">
            <img src="http://s.fotorama.io/8.jpg">
        </a>
    </div>
    <div>
        <a data-fancybox="gallery" href="http://lorempixel.com/output/nightlife-q-c-900-800-9.jpg">
            <img src="http://lorempixel.com/output/nightlife-q-c-900-800-9.jpg">
        </a>
    </div>
</div>
<div class="slider slider-nav">
    <div>
        <img src="http://s.fotorama.io/1.jpg">
    </div>
    <div>
        <img src="http://s.fotorama.io/2.jpg">
    </div>
    <div>
        <img src="http://s.fotorama.io/3.jpg">
    </div>
    <div>
        <img src="http://s.fotorama.io/4.jpg">
    </div>
    <div>
        <img src="http://s.fotorama.io/5.jpg">
    </div>
    <div>
        <img src="http://s.fotorama.io/6.jpg">
    </div>
    <div>
        <img src="http://s.fotorama.io/7.jpg">
    </div>
    <div>
        <img src="http://s.fotorama.io/8.jpg">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200">
    </div>
</div>

<div class="fotorama"
     data-width="1000"
     data-height="500"
     data-fit="contain">
    <div>
        <a href="http://s.fotorama.io/1.jpg" data-fancybox="gallery">
            <img src="http://s.fotorama.io/1.jpg">
        </a>
    </div>
	<div>
        <a href="http://s.fotorama.io/1.jpg" data-fancybox="gallery">
            <img src="http://s.fotorama.io/1.jpg">
        </a>
    </div>
    <div>
        <a href="http://s.fotorama.io/1.jpg" data-fancybox="gallery">
            <img src="http://s.fotorama.io/1.jpg">
        </a>
    </div>
</div>


<script>
    $('[data-fancybox="gallery"]').fancybox({
        thumbs : {
            showOnStart : true
        },
        hash : true
    })
     $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        fade: true,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 5,
        centerMode: false,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: true,
        infinite: false,
        focusOnSelect: true
    });
</script>

slick-slider-fancybox.markdown

slick slider + fancybox

A Pen by peter on CodePen.

License.

style.scss

@import "https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.scss";
@import "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css";

.slider-for {
    
}

.slider-nav {
    .slick-slide {
        height: 100px;
        overflow: hidden;
        position: relative;
        
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            max-height: 150%;
            max-width: 150%;
        }
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />