如何重置光滑的幻灯片位置？答案

【问题标题】：How to reset slick slide position?如何重置光滑的幻灯片位置？
【发布时间】：2018-11-28 15:59:04
【问题描述】：

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

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）

【问题讨论】：

标签： jquery nested carousel slideshow slick.js

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

您可以通过将标记分开来轻松地做同样的事情。当单击任何第一个滑块的幻灯片时，您可以通过它具有的类检查该幻灯片，并从我们在 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 也是如此，依此类推。

这样你就摆脱了嵌套，用户体验还是一样的，而且标记也更容易操作。

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

【讨论】：