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

Multiple Slick Sliders On Same Page with same classes

Add Answer

Weary Wildebeest answered on October 5, 2021 Popularity 7/10 Helpfulness 4/10

answer Multiple Slick Sliders On Same Page with same classes

related slick slider multiple sliders on one page

related Multiple Slick Sliders On Same Page with same classes

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

Link to this answer
Share Copy Link

Contributed on Oct 05 2021

Weary Wildebeest

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on Jul 22 2022

Motionless Mockingbird

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

Multiple Slick Sliders On Same Page with same classes

Contents

More Related Answers

Multiple Slick Sliders On Same Page with same classes

Closely Related Answers

slick slider multiple sliders on one page

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.