スライダーの中にスライダー

スライダーの中でスラーダーを動かす

html

<div id="outer-slider">
  <div class="outer-slide-one">
    <img ...>
  </div>
  <div id="inner-slider" class="outer-slide-two">
    <div class="inner-slide-one">
      <img ...>
    </div>
    <div class="inner-slide-two">
      <img ...>
    </div>
  </div>
</div>

jquery

    $(window).on('load',function() {
      var outerSlide = $('#outer-slider');
      outerSlide.slick({
        autoplay: true,
        autoplaySpeed: 4000,
        speed: 1000,
        fade: true,
        infinite: true,
      })

      var innerSlider = $('#inner-slider');
      innerSlider.slick({
        autoplay: true,
        autoplaySpeed:4000,
        speed: 1000,
        infinite: true,
      })
        .on("afterChange", function(event, slick, currentSlide, nextSlide) {
          switch (currentSlide){
            case 0:
              // 1枚目
              $(this).slick("slickSetOption", "autoplaySpeed", 6000);
              break;
            default:
              // それ以降
              $(this).slick("slickSetOption", "autoplaySpeed", 2000);
              break;
          }
        });
    })

slickスライダーで実装。
中のスライドの１枚目をゆっくり動かして外のスライドの速さに合わせて調整する。