'Multiple Slick Sliders Issue

I am using Slick.js plugin with its Slider Syncing feature. The issue I am having is that if I use multiple sliders on a single page, by clicking next or prev buttons plugin performs the action for all sliders on page. I wonder is there anything I could do with JQuery to have the next and prev work for each slider on page not for all? Thanks in advance.

HTML

<div class="slider">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>                                                            
<div class="slider-nav">                                  
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

SLICK RUN SCRIPT

$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider',
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
});
jqueryslick.js


Solution 1:[1]

Call your jquery on id and not class.

by clicking next or prev buttons plugin performs the action for all sliders on page

This is because you are calling jQuery on class name and thus it will affect all the elements have that respective class.

HTML

<div class="slider" id="slider_1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider-nav" id="slider_nav_1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider" id="slider_2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
<div class="slider-nav" id="slider_nav_2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

jQuery

var sliders = {
  1: {slider : '#slider_1', nav: '#slider_nav_1'},
  2: {slider : '#slider_2', nav: '#slider_nav_2'},
  3: {slider : '#slider_3', nav: '#slider_nav_3'}
};

$.each(sliders, function() {

  $(this.slider).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: this.nav
  });
  $(this.nav).slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: this.slider,
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
  });

});

Solution 2:[2]

There is simple solutions

call all slider class with each function and do this

$('.slider').each(function(){
    $(this).slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        centerMode: true,
        prevArrow: $(this).parent().find('.arrow-left'),
        nextArrow: $(this).parent().find('.arrow-right')    
    });
  });

Works prefect my side.

Solution 3:[3]

I've also used this code often:

$(function () {
    $('.slider-for').each(function(num, elem) {
        elem = $(elem);
        elem.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            draggable: false,
            fade: true,
            asNavFor: '.slider-nav'
        });

        elem.next('.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
                    }
                }
            ]
        });
    });
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Soyeb Ahmed
Solution 3 devzom

Related Questions