CODEWITHSUNDEEP
javascriptsliderslick.js
AdSim
AdSim

Reputation: 1

Multiple slick slider on page ... unwanted synchron sliding

I have a page with multiple sliders based on slick-slider. Here is a link http://www.kryolan.einfach-beginnen.de/home.html Some of these slider use a custom paging to show something like 1/4 or 2/4 and custom prev next button. Works great, but all sliders with the custom paging on this page move synchronously. And I can't find out why. I don't want them to to move synchronously. All other sliders are fine.

I also tried to call them "really separate" by calling them separate with their ID. But this changed nothing.

My guess is it's something with the paging, but I can't find out why and how.

Any ideas?

My code:

   $('.trendlooks .product-slider').each(function(){          
      var $status = $(this).closest('.pagingInfo span');
      var $slickElement = $(this);

      $slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
            //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
            var i = (currentSlide ? currentSlide : 0) + 1;
            $status.text(i + '/' + slick.slideCount);
      });

      $slickElement.slick({
          dots: true,
          pauseOnDotsHover: true,
          infinite: true,
          speed: 500,
          slidesToShow: 1,
          autoplay: false,
          arrows:false
        });

      $slickElement.parent().find('.pagingInfo .next-slide').click(function(){
            $slickElement.slick('slickNext');
            console.log($slickElement.attr('id'));
        });
      $slickElement.parent().find('.pagingInfo .prev-slide').click(function(){
            $slickElement.slick('slickPrev');
        });
    });

Upvotes: 0

Views: 962

Answers (1)

Gábor Huszák
Gábor Huszák

Reputation: 66

Just checked your site, and there are two problems causing this, and it's not related to the code that you pasted here.

That code is actually doing nothing, because the $status variable is uninitialized in that closure when the afterChange event is fired, you should use this code instead to update the text of that span:

$('.pagingInfo span', slick.$slider.parent()).text(i + '/' + slick.slideCount)

The problem causes the "fake updates" is firstly at main.js line 594:

var $status = $('.pagingInfo span');

After this call, the $status variable holds ALL of the .pagingInfo spans, not the only one thats inside .shopteaser-slider.

At line 613 and 616 you add a click listener again to ALL next and prev buttons (not just the shopteaser-slider ones) to trigger an event on shopteaser-slider, and after that, the callback at line 597 sets the $status (which holds all of your .pagingInfo span) text to shopteaser-slider currentSlide value.

This is why you see that everything is synced.

Solution:

Be more specific at line 594: $('.pagingInfo span', $('.shopteaser-slider').parent()) or something.

And at lines 613 and 616: Instead $('.next-slide').click be more specific: $('.next-slide', $('.shopteaser-slider').parent()) or something more specific.

Or just use ID-s.

Hope that helps.

Upvotes: 1

Related Questions