Ajax messing up Slick js script

Anonymous

#203284

I have this code in a separate js file where I initalize all jquery plugins :

jQuery(document).ready(function($){
 
  $(".visuels-realisations").slick({
    dots: false,
    infinite: true,
    autoplay: false,
    autoplaySpeed: 10000,
    slidesToShow: 2,
    slidesToScroll: 1
  });

});

Trevor

#203286

Ah, OK, try this then:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.visuels-realisations').slick('unslick');
    $(".visuels-realisations").slick({
      dots: false,
      infinite: true,
      autoplay: false,
      autoplaySpeed: 10000,
      slidesToShow: 2,
      slidesToScroll: 1
    });
  });
}(jQuery));</script>

Anonymous

#203288

Like that in the plugin or in the js file ? If in the js file should I change it to :

jQuery(document).ready(function($){
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.visuels-realisations').slick('unslick');
    $(".visuels-realisations").slick({
      dots: false,
      infinite: true,
      autoplay: false,
      autoplaySpeed: 10000,
      slidesToShow: 2,
      slidesToScroll: 1
    });
  });
});

Or leave it as is ?

Because I tried on local to paste both your code and the one I pasted above un the js file and the sliders weren’t working anymore.

Trevor

#203292

Your js file might look like this now:

jQuery(document).ready(function($){
   $(".visuels-realisations").slick({
    dots: false,
    infinite: true,
    autoplay: false,
    autoplaySpeed: 10000,
    slidesToShow: 2,
    slidesToScroll: 1
  });
});
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.visuels-realisations').slick('unslick');
    $(".visuels-realisations").slick({
      dots: false,
      infinite: true,
      autoplay: false,
      autoplaySpeed: 10000,
      slidesToShow: 2,
      slidesToScroll: 1
    });
  });
}(jQuery));

Anonymous

#203296

I copied it exactly as you pasted in my js file but no results.

Trevor

#203315

This has pretty much exhausted all my ideas. Does it have javascript errors? Is the content completely missing, or is it just hidden?

Anonymous

#203325

He’s a screen of the errors : https://i.ibb.co/mctpjVB/Capture-d-e-cran-2019-02-26-a-16-28-31.png

And of the result : https://i.ibb.co/yVVQmfd/Capture-d-e-cran-2019-02-26-a-16-28-43.png
It displays the images as if the slider js was not installed.

Trevor

#203327

Ah OK. Try removing that line then?

$('.visuels-realisations').slick('unslick');

Anonymous

#203333

Yes that did it ! Thank you !

Trevor

#203347

Yay!

I will close this thread for now.

[Author]

Posts