Slick Slider: Nested Slides

Child slick slider inside parent slick slider.

by mikhailivanko

HTML

<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<section class="slider">
  <div>
    <p> slider in slider </p>
    <div class="second-slider">
      <div>slide1.1</div>
      <div>slide1.2</div>
      <div>slide1.3</div>
    </div>
  </div>
  <div>slide2</div>
  <div>slide3</div>
</section>
<div class="page-nav">

</div>

SCSS

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

.slider {
    width: auto;
    margin: 30px 50px 50px;
    background: #000000;
}

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

.second-slider .slick-slide {
    background: $c2;
}

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

.slick-dots {
    bottom: -30px;
}

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

.second-slider .slick-slide:nth-child(odd) {
    background: $c1;
}

JavaScript

$(".slider").on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {

  var $elSlide = $(slick.$slides[currentSlide]);

  var sliderObj = $elSlide.closest('.slick-slider');

  if (sliderObj.hasClass('second-slider')) {
    return;
  }

  var pager = (currentSlide ? currentSlide : 0) + 1 + "/6";
  $('.page-nav').text("CURRENT SLIDE : " + pager);
});

$(".slider").slick({
  autoplay: false,
  dots: true,
  adaptiveHeight: true,
  responsive: [{
    breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      slidesToShow: 2,
      slidesToScroll: 2
    }
  }]
});

$(".second-slider").slick({
  autoplay: false,
  dots: true,
  adaptiveHeight: true,
  responsive: [{
    breakpoint: 500,
    settings: {
      dots: false,
      arrows: false,
      infinite: false,
      slidesToShow: 2,
      slidesToScroll: 2
    }
  }]
});

$('.second-slider').on('touchstart touchmove mousemove mouseenter', function(e) {
  $('.slider').slick('slickSetOption', 'swipe', false, false);
});

$('.second-slider').on('touchend mouseover mouseout', function(e) {
  $('.slider').slick('slickSetOption', 'swipe', true, false);
});