Question

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

https://i.imgur.com/PDQbqCA.png（第一张幻灯片）
https://i.imgur.com/1JiP7jn.png（第二张幻灯片，在第一个幻灯片元素上单击）

这是我的代码：

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结构。但是，如果我需要嵌套的幻灯片，我将再次检查如何使它们工作。

Answer 2

首先，我不确定您是否在代码中遗漏了某些内容，但是我将其添加到了Codepen中，但它https://codepen.io/swarad07/pen/qwONBG无效。也许您可以更改此Codepen以正确反映您遇到的问题，我们可以为您提供帮助。

第二，首先阅读问题并查看代码，然后从1st（已初始化）slick滑块的幻灯片内的标记创建一个新的slick滑块，可能会遇到一些无法预料的问题。

通过将标记分开，可以轻松地完成相同的操作。单击任何一个第一滑块的幻灯片时，都可以通过其具有的类来检查该幻灯片，然后从我们在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');

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

2 个答案: