CODEWITHSUNDEEP
jqueryslick.js
Hellodan
Hellodan

Reputation: 1208

Slick slider append dots to class

I'm using Slick to create multiple slideshows on a layout I am currently building. I'm having a problem when I try to use appendDots: '.slick-list' to append dots to the .slick-list class because it's a class created by Slick in each slider on the page and adds dots to each of the sliders.

How can I control the dots so that they only appear for this specific slider?

 function createSlick(){
    $(".grid-slideshow").not('.slick-initialized').slick({
       slidesToShow: 3,
       slidesToScroll: 1,
       infinite: false,
       dots: true,
       appendDots: '.slick-list'
     });
    }
    createSlick();
    $(window).on( 'resize', createSlick );

Upvotes: 0

Views: 9579

Answers (2)

Web Mistress
Web Mistress

Reputation: 1

You can try:

[].slice.call(sliders).forEach(function (elem) {
  var counter = $(elem).find('.counter-class');
  var slickElement = $(elem).find('.items-wrapper-class');
  var prev = $(elem).find('.prev-class');
  //...
});

Upvotes: 0

Ankul Chaudhary
Ankul Chaudhary

Reputation: 84

Please Try This:-

function createSlick(){
    $(".grid-slideshow").each(function(index, element) {
        $(this).not('.slick-initialized').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            infinite: false,
            dots: true,
            appendDots: $(this)
        }); 
    });
}
createSlick();
$(window).on( 'resize', createSlick );

Upvotes: 2

Related Questions