如何重置光滑的滑动位置？

Question

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

1. https://i.imgur.com/PDQbqCA.png（第一张幻灯片）
2. https://i.imgur.com/1JiP7jn.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的第一个元素下的同一个点（Name s1 elm 1或Name s4 elm 1）

Answer 1

最后我使用了类似的东西：

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

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

Answer 2

首先，我不确定你是否错过了代码中的某些内容，但我将其添加到codepen中并且它不起作用https://codepen.io/swarad07/pen/qwONBG。也许您可以更改此codepen以正确反映您遇到的问题，我们可以提供帮助。

其次，在第一次阅读问题并查看代码时，从第一个（已经初始化的）滑动滑块的幻灯片内部的标记创建一个新的光滑滑块可能会出现一些无法预料的问题。

您可以通过将标记分开来轻松地执行相同的操作。单击任何第一个滑块的滑动时，通过它所具有的类检查幻灯片，并从DOM中的标记初始化相应的第二个滑动滑块。

<markup for main slick slider>
  <slide 1>
  <slide 2>
  <slide 3>
</markup for main slick slider>

<chidlren of slide 1>
<chidlren of slide 2>
<chidlren of slide 3>

当我单击幻灯片1时，我为幻灯片1的子项创建了一个滑块。幻灯片2的相同内容，依此类推。

这样你摆脱了嵌套，UX仍然是相同的，并且标记也​​更容易操作。

要将已创建的滑块重置为0，可以使用$('.slick-slider').slick('slickGoTo', 0);或$('.slick-slider').slick('refresh');