Question

我有一个有两个旋转木马的页面。我正在使用光滑的滑块插件，我需要创建自定义导航，分别针对每个旋转木马。

我正在努力弄清楚我将如何做到这一点。目前，如果您点击任何转盘的导航，它会更改所有转盘中的幻灯片。

任何帮助都将不胜感激。

继续演示 - http://jsfiddle.net/81t4pkfa/154/

JS

$('.test').each(function (idx, item) {
    var carouselId = "carousel" + idx;
    this.id = carouselId;

    $(this).slick({
        slide: "#" + carouselId +" .option",
        arrows: false
    });

    $(".tabs li a").click(function(){
       var slideIndex = $(this).parent().index();
       $('.test').slick('slickGoTo', parseInt(slideIndex));
    });
});

Answer 1

您可以使用解决方案http://jsfiddle.net/81t4pkfa/153/

$('.test').each(function (idx, item) {
    var carouselId = "carousel" + idx;
    this.id = carouselId;
    $(this).slick({
        slide: "#" + carouselId +" .option",
        arrows: false
    });
});
    $(".tabs li a").click(function(){
      var slideIndex = $(this).parent().index();
     $(this).parent().parent().parent().slick('slickGoTo', parseInt(slideIndex));
    });
//});

.effect {
    margin: 5px 0;
    height: 70px;
    width: 320px;
    text-align: center;
}
.option {
    border: 1px solid grey;
    height: 50px;
    width: 150px;
    background: #eee;
}
.prev_next a { display: inline-block; width:80px; text-align:center; margin: 2px; border: 0; padding: 4px; background-color: #666; color: #fff; }

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test 1</p>
    </div>
    <div class="option">
        <p>Test 1 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0">
        <a href="#">Regular</a>
      </li>
      <li class="tab slide-1">
        <a href="#">Athletic</a>
      </li>
    </ul>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test 2</p>
    </div>
    <div class="option">
        <p>Test 2 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0">
        <a href="#">Regular</a>
      </li>
      <li class="tab slide-1">
        <a href="#">Athletic</a>
      </li>
    </ul>
</div>
<div class="test">
    <div class="prev_next"></div>
    <div class="option">
        <p>Test 3</p>
    </div>
    <div class="option">
        <p>Test 3 -</p>
    </div>
    <ul class="tabs">
      <li class="tab slide-0">
        <a href="#">Regular</a>
      </li>
      <li class="tab slide-1">
        <a href="#">Athletic</a>
      </li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>

由于您的目标是 .test ，因此所有使用类测试的元素都获得了光滑的方法。我使用 parent（）

将其更改为 DOM遍历

Answer 2

你可以这样做

  $('.each-div').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    prevArrow: "<span class='slick-prev pull-left carousel-btns'><i class='fa fa-angle-left fa-3x' aria-hidden='true'></i></span>",
    nextArrow: "<span class='slick-next pull-right carousel-btns'><i class='fa fa-angle-right fa-3x' aria-hidden='true'></i></span>"
});

Answer 3

经过长时间的搜索，我找到了一个简单的解决方案，该解决方案可以在包装器内部找到滑块导航。

$('.slider-wrap').each(function (index, sliderWrap) {
    var $slider = $(sliderWrap).find('.slider');
    var $next = $(sliderWrap).find('.next');
  var $prev = $(sliderWrap).find('.prev');
    $slider.slick({
        dots: true,
      slidesToShow: 2.5,
        nextArrow: $next,
      prevArrow: $prev
    });
});

Noah Rodenbeek的笔在这里：https://codepen.io/nominalaeon/pen/gwAdjd

如果一个页面上有多个轮播，如何为每个光滑的滑块创建自定义导航？

3 个答案: