同一页面上具有相同类别的多个光滑滑块?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了同一页面上具有相同类别的多个光滑滑块?相关的知识,希望对你有一定的参考价值。

我正在将Slick js用于页面上的某些轮播。每个轮播都有缩略图导航。一切都很好,但我的问题是,我希望页面上的多个轮播中有一个以上具有相同的类名。这有可能吗,我尝试对轮播进行迭代,但后来又打破了。我可以为每个轮播设置多个版本的平滑轮播,但是想知道是否有一种方法可以为每个轮播使用相同的类而不会导致错误。

html:每个轮播设置都是这样的>>

<div class="video-slider slider-for">
    <!-- slide 1 -->
    <div>
        Slide One
    </div>
    <!-- end slide 1 -->
    <!-- slide 2 -->
    <div>
        Slide Two
    </div>
    <!-- end slide 2 -->
    <div>
        Slide Three
    </div>
</div>

<!-- Thumbnails -->
<div class="video-slider slider-nav slider-nav-thumbnails">
    <!-- slide one thumbnail -->
    <div class="video-carousel--thumbnail">
      Slide One Thumbnail
    </div>
    <!-- slide two thumbnail-->
    <div class="video-carousel--thumbnail">
        Slide Two Thumbnail
    </div>
    <div class="video-carousel--thumbnail">
        Slide Three Thumbnail
    </div>
</div>

jquery:

     $(function () 
        var $videoSlider = $('.video-slider');

        /*INIT*/
        if ($videoSlider.length) 
          $('.slider-for').slick(
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            draggable: false,
            fade: true,
            asNavFor: '.slider-nav'
          );

          $('.slider-nav-thumbnails').slick(
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.slider-for',
            dots: false,
            arrows: false,
            vertical: true,
            draggable: false,
            centerMode: false,
            focusOnSelect: true,
            responsive: [
              
                breakpoint: 769,
                settings: 
                  vertical: false
                
              
            ]
          );
);

我正在将Slick js用于页面上的某些轮播。每个轮播都有缩略图导航。一切正常,但我的问题是我希望页面上的多个旋转木马中不止一个具有相同类...

答案

我认为您只需修改代码即可分别初始化每个滑块。但这应该与保持相同的类一致。

以上是关于同一页面上具有相同类别的多个光滑滑块?的主要内容,如果未能解决你的问题,请参考以下文章

使用光滑滑块作为另一个滑块的导航,该滑块在ajax加载方法调用时打开

具有固定背景的光滑滑块溢出,如何防止幻灯片上的图像裁剪?

如何选择与另一个页面具有相同类别的多个图像

如何使用带有缩略图滑块的光滑滑块创建自定义滑块?

在同一页面上的多个图表上将vAxis设置为相同比例

如何在同一个块中等待多个块事件