如何重置光滑滑块位置？

Question

我正在制作嵌套的光滑滑块。我希望单击任何第一个滑块元素隐藏第一个滑块并显示第二个滑块（在第一个滑块的子块上创建）。我遇到的问题是幻灯片在我的预览块之外开始（参见图片）

1. https://i.stack.imgur.com/nBXLD.png（第一张幻灯片）
2. https://i.stack.imgur.com/vIJNG.png（第二张幻灯片，单击第一张幻灯片元素）
3. 

这是我的代码：

html:

<div class="slides-preview">
<button type="button" class="arrow-prev></button>
<div class="slide1">
   <div class="slide1-elm">
      <div class="header">Name slide 1 element 1</div>
      <div class="slide2">
         <span class="close">close</span>
         <div class="option"></div>
         <div class="option"></div>
         <div class="option"></div>
      </div>
   </div>
   <div class="slide1-elm">
      <div class="header">Name slide 1 element 2</div>
      <div class="slide2">
         <span class="close">close</span>
         <div class="option"></div>
         <div class="option"></div>
         <div class="option"></div>
      </div>
   </div>
   <div class="slide1-elm">
      <div class="header">Name slide 1 element 3</div>
      <div class="slide2">
         <span class="close">close</span>
         <div class="option"></div>
         <div class="option"></div>
         <div class="option"></div>
      </div>
   </div>
</div>
<button type="button" class="arrow-next></button>
</div>

CSS：

.slide2 { display: none; }
button  { position: absolute; top: 0; }
.arrow-prev { left: 0; }
.arrow-next { right: 0; }
.close { }

jQuery：

$(document).ready(function(){

    function initCompSlide(){
        $('.slide1').not('.slick-initialized').slick({
            infinite: false,
            initialSlide: 0,
            slidesToShow: 4,
            slidesToScroll: 4,
            slickSetOption: true,
            prevArrow: $('button.arrow-prev'),
            nextArrow: $('button.arrow-next')
        });
    }

    function initOptSlide(elm){
        elm.not('.slick-initialized').slick({
            infinite: false,
            initialSlide: 0,
            slidesToShow: 4,
            slidesToScroll: 4,
            focusOnSelect: true,
            slickSetOption: true,
            prevArrow: $('button.arrow-prev'),
            nextArrow: $('button.arrow-next')
        });
    }

    initCompSlide();

    $(document).on('click', '.slide1-elm', function () {
        var optBlock = $(this).find('.slide2');
        initOptSlide(optBlock);
    });

    $(document).on('click', '.close', function (e) {
        e.stopPropagation();
        $('.slide2.slick-initialized').slick('unslick'); //notworking
        $('.slide2.slick-initialized').slick('setPosition'); //not working
    });

});

请参阅此处检查我用来实现我需要的另一种方法http://jsfiddle.net/fmo50w7n/3631/。但它并没有按预期工作。我希望所有红色块都从 Slide1 第一个元素下的同一点定位（名称 s1 elm 1 或名称 s4 elm 1）

Answer 1

最后我用了类似的东西：

$('.slick-slider').slick('slickGoTo', 0);

它有效。但嵌套的光滑滑块还有其他几个问题。所以我决定改变 HTML 结构。但如果我需要必要的嵌套幻灯片，我会再次重新检查如何使它们工作。