CODEWITHSUNDEEP
javascriptjqueryhtmlslick.js
user2498890
user2498890

Reputation: 1556

How to create custom navigation for each slick slider when there are multiple carousels on one page?

I have a page that has two carousels. I'm using the slick slider plugin and I need to create custom navigation that targets each of the carousel separately.

I'm struggling to figure out how I would do this. At the moment if you click on the navigation for any of the carousels it changes the slides within all the carousels.

Any help would be appreciated.

Heres the demo - 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));
    });
});

Upvotes: 1

Views: 7481

Answers (3)

user3615851
user3615851

Reputation: 990

After a long search I found a simple solution which finds the slider navigation inside the wrapper. 

$('.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
    });
});

Pen by Noah Rodenbeek here: https://codepen.io/nominalaeon/pen/gwAdjd

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

Here you go with the solution 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>

Since you were targeting .test so all the elements with class test was getting the slick method. I changed it to DOM traversal using parent()

Upvotes: 2

yasarui
yasarui

Reputation: 6553

you can do like below 

  $('.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>"
});

Upvotes: 0

Related Questions