Breaking News: Grepper is joining You.com. Read the official announcement!

slick slider multiple sliders on one page

Motionless Mockingbird answered on October 5, 2021 Popularity 9/10 Helpfulness 4/10

answer slick slider multiple sliders on one page

related Multiple Slick Sliders On Same Page with same classes

slick slider multiple sliders on one page

Comment

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

});

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript slick slider sliders

Link to this answer
Share Copy Link

Contributed on Jul 22 2022

Motionless Mockingbird

0 Answers Avg Quality 2/10

Closely Related Answers

Multiple Slick Sliders On Same Page with same classes

Comment

$(document).ready(function() {
    var myCarousel = $(".slider-for:not(.slick-initialized)");
    myCarousel.each(function() {
        $(this).slick({});
    });
});

Popularity 7/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript slick sliders sli

Link to this answer
Share Copy Link

Contributed on Oct 05 2021

Weary Wildebeest

0 Answers Avg Quality 2/10

Multiple Slick Sliders On Same Page with same classes

Comment

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

Popularity 6/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: slick sliders whatever whateve

Link to this answer
Share Copy Link

Contributed on Oct 05 2021

Weary Wildebeest

0 Answers Avg Quality 2/10

slick slider multiple sliders on one page

Contents

More Related Answers

slick slider multiple sliders on one page

Closely Related Answers

Multiple Slick Sliders On Same Page with same classes

Multiple Slick Sliders On Same Page with same classes

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.