Slider Slick + Fancybox (Not Bad)

index.html

<div class="container">
  <h2>Slider Slick + Fancybox</h2>
    <div class="row">
      <div class="col-md-12 heroSlider-fixed">
        <div class="overlay"></div>
				
				
         <!-- Slider -->
        <div class="slider responsive">
          <div>
						<a href="http://lorempixel.com/300/250/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/300/250/animals" alt="" />
							</a>
					</div>
					
					<div>
						<a href="http://lorempixel.com/600/600/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/600/500/animals" alt="" />
							</a>
					</div>
					
					<div>
						<a href="http://lorempixel.com/600/600/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/300/250/animals" alt="" />
							</a>
					</div>
					
					<div>
						<a href="http://lorempixel.com/600/600/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/300/250/animals" alt="" />
							</a>
					</div>
					
					<div>
						<a href="http://lorempixel.com/600/600/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/300/250/animals" alt="" />
							</a>
					</div>
					
					<div>
						<a href="http://lorempixel.com/600/600/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/300/250/animals" alt="" />
							</a>
					</div>
					
					<div><a href="http://lorempixel.com/600/600/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/300/250/animals" alt="" />
						</a>
					</div>
					
					<div><a href="http://lorempixel.com/600/600/animals" data-fancybox="popin-img">
						<img src="http://lorempixel.com/300/250/animals" alt="" />
						</a>
					</div>
					
        </div>
				
				
				 <!-- control arrows -->
				<div class="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				</div>
				<div class="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				</div>
				
      </div>
    </div>
  </div>

script.js

$().fancybox({
	selector: '[data-fancybox="popin-img"]',
	thumbs: false,
	hash: false,
});


//
$('.responsive').slick({
  dots: true,
	prevArrow: $('.prev'),
	nextArrow: $('.next'),
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

scripts

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

slider-slick-fancybox.markdown

Slider Slick + Fancybox

A Pen by M. Mrschl on CodePen.

License.

style.scss

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

img {
  width: 100%;
  height: auto;
	padding: 5px;
}

h2 {
  text-align:center;
	padding-bottom: 1em;
}

.slick-dots {
	text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  li {
    display:inline-block;
    margin-left: 4px;
    margin-right: 4px;
    &.slick-active {
      button {
        background-color:black;
      }
    }
    button {
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      background-color:#999;
      border:none;
      width: 15px;
      height: 15px;
      border-radius:50%;
    }
		:hover{
			background-color: black;
		}
  }
}

/* Custom Arrow */
.prev{
	color: #999;
	position: absolute;
	top: 38%;
	left: -2em;
	font-size: 1.5em;
		:hover{
			cursor: pointer;
			color: black;
		}
}
.next{
	color: #999;
	position: absolute;
	top: 38%;
	right: -2em;
	font-size: 1.5em;
	:hover{
			cursor: pointer;
			color: black;
		}
}

@media screen and (max-width: 800px) {
    .next {
        display: none !important;
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />