Multiple Slick Sliders Issue

Question

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
});

Mignonmignonette

Answer 1

Here is another solution with an each loop which iterates over all elements with class="slider-for"and dynamically assign id to all the .slider-for elements and their respective .slider-nav elements.

But there is a catch, they should be placed in perfect order.

jQuery

$('.slider-for').each(function(key, item) {

  var sliderIdName = 'slider' + key;
  var sliderNavIdName = 'sliderNav' + key;

  this.id = sliderIdName;
  $('.slider-nav')[key].id = sliderNavIdName;

  var sliderId = '#' + sliderIdName;
  var sliderNavId = '#' + sliderNavIdName;

  $(sliderId).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: sliderNavId
  });

  $(sliderNavId).slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: sliderId,
    dots: true,
    arrows: true,
    centerMode: false,
    focusOnSelect: true
  });

});

Needle

How are the parameters passed in this example? Am I missing something? – Deadlight

@EricCiCero Which parameters? – Needle

Works great for custom navigations as well with appendArrows – Geny

This worked great for me, except for some odd reason when my selector was an ID it would only work for the first slider. But when i changed the selector to a class it worked for all sliders. Just figured I'd share if anyone else had the same issue. Thanks @Needle – Amber

Answer 2

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
  });

});

Needle

Thank for your response, I have also came up with the solution, but considering that I have more that 20 sliders on a page I would like to find a better one, using say each method or something else. Anyway if won't find any other solution I will accept yours. Thanks again. – Mignonmignonette

why did you assigned slick for nav and slider differently.. any diff. requirement or any thing else. ? – Needle

Just followed instructions on plugin's homepage. – Mignonmignonette

have a look at the answer now, i replace the solution with each loop – Needle

Yeah, it's another great solution, but still not perfect for my needs. I just came across another solution, which suits perfectly but it does not have the navigation. I would appreciate if you could take a look the fiddle jsfiddle.net/81t4pkfa/2 and help me to solve this using this example. Thanks a lot again for you efforts. – Mignonmignonette

Yes it can be done, its just assigning id's dynamically. Will post the solution shortly. And yes its really a nice and clean and lovely approach – Needle

Answer 3

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.

Capuchin

Answer 4

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
                    }
                }
            ]
        });
    });
});

Crackpot