Ajax messing up Slick js script

Laurent Mengin

#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
  });

});

Add New Note to this Reply

Trevor Moderator

#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>

Add New Note to this Reply

Laurent Mengin

#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.

Add New Note to this Reply

Trevor Moderator

#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));

Add New Note to this Reply

Laurent Mengin

#203296

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

Add New Note to this Reply

Trevor Moderator

#203315

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

Add New Note to this Reply

Laurent Mengin

#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.

Add New Note to this Reply

Trevor Moderator

#203327

Ah OK. Try removing that line then?

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

Add New Note to this Reply

Laurent Mengin

#203333

Yes that did it ! Thank you !

Add New Note to this Reply

Trevor Moderator

#203347

Yay!

I will close this thread for now.

Add New Note to this Reply

[Author]

Posts