Ajax messing up Slick js script

Anonymous

#203197

Hi !

I set up ajax search on a page which has jquery carousels (I used the Slick carousels). The sorting works fine, but when the results show up, the carousels don’t work (they do one I reload the page).

Here is the page (I have not done any compatibility or responsive yet hopefully it will still show up fine) : http://bsm.connivence-poleweb.fr/projets/

How could I fix this ?

Thanks !
Caroline

Anonymous

#203198

This reply has been marked as private.

Trevor

#203199

Are the elements in question inside the .content-area ajax container?

Trevor

#203210

You might find this or something like it would work if the preceding assumption that I made was that slick was being used inside the Ajax Container:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.skills_section').slick('unslick'); /* ONLY remove the classes and handlers added on initialize */
    $('.my-slide').remove(); /* Remove current slides elements, in case that you want to show new slides. */
    $('.skills_section').slick(getSliderSettings()); /* Initialize the slick again */
  });
}(jQuery));</script>

But the classes used above would need to change to match what classes yours uses, so you need to modify this code.

Anonymous

#203257

The slider is indeed in the ajax section.

My skills in jQuery are very limited, what are the skills_section / my-slide supposed to match ? Here’s my mark up :

<div class=”contents”>
<section class=”visuels-realisations”> <— This is the slider block targeted by the slick script
<div>Image</div> <— These are the slides
<div>Image</div>
</section>

<section class=”visuels-realisations”> <— This is the slider block targeted by the slick script
<div>Image</div> <— These are the slides
<div>Image</div>
</section>
</div>

Trevor

#203264

As you are not wanting to remove slides, that line can probably go. So, maybe this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.visuels-realisations').slick('unslick');
    $('.visuels-realisations').slick(getSliderSettings());
  });
}(jQuery));</script>

If you don’t know how to add JS to your site, you can use this plugin:

https://wordpress.org/plugins/custom-css-js/

You won’t need the script tags, as that plugin adds them for you.

Anonymous

#203269

I’ve installed the plugin and pasted the code but it didn’t change anything. Maybe the synthax is wrong. I also tried as said by the plugin :

jQuery(document).ready(function( $ ){
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.visuels-realisations').slick('unslick');
    $('.visuels-realisations').slick(getSliderSettings());
  });
});

But didn’t work either.
Here’s the error from the console :

Uncaught TypeError: Cannot read property ‘unslick’ of undefined
at a.fn.init.$.fn.slick (slick.js?ver=1:3005)
at HTMLFormElement.<anonymous> (?_sft_categories-projets=ouvrages-publics:334)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
at Object.trigger (jquery.js?ver=1.12.4:3)
at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
at HTMLFormElement.<anonymous> (jquery.js?ver=1.12.4:3)
at Function.each (jquery.js?ver=1.12.4:2)
at a.fn.init.each (jquery.js?ver=1.12.4:2)
at a.fn.init.trigger (jquery.js?ver=1.12.4:3

Trevor

#203274

Are the slides added by a plugin?

Anonymous

#203276

It’s a jQuery plugin but not a wordpress plugin. The js file is in the js folder (slick.js)

Trevor

#203278

How are you initialising it?

[Author]

Posts