Slick carousel breaks when returning to the page.

[leGenti]

Hi guys

Im making a webapp using Python django and Next.js.

On my homepage i want to make a header section with big images using Slick Carousel. When i start my application everything seems to be working fine, but when I go to a different page and return to my home page (clicking arrow back or even using my menu link) Slick breaks en the images stack on top of eachother.

I've read something about turbolinks. Does next.js use turbolinks automatically?

Is there a solution for this problem or do i have to use something else than Slick? That would be a pity.

Thanks in advance,

Gentian

[joelataccelm]

add your slick initialization code within a turbolinks:load or page:change event, and check if the slick container has a slick-initialized class before reinitializing.

document.addEventListener('turbolinks:load', function() {
    if (!document.querySelector('#slick').classList.contains('slick-initialized')){
        jQuery('#slick').slick();
    }
})

[leGenti]

@joelataccelm, thanks for the reply. I have one more small question. Where do I have to insert this piece of code? I have tried pasting it in my main.js, but it doesn't work.

[joelataccelm]

@leGenti If you have the site up somewhere, I can take a look and figure out what might be going on. Are you using next.js as a router? It's possible you're overriding the pjax events of turbolinks and should instead bind your slick initialization events to the next.js load event.

[leGenti]

@joelataccelm Hi Joel, thanks for your reply. I use next.js' to route through my pages. The site isn't up yet, still developing local. I could share my screen on discord if you're up for that, or add you to the repo on github so you can take a look yourself (I'll probably need approval from my boss).

[superfein]

@leGenti I'm having the same issue, except the slider isn't loading only in Firefox and Edge browsers, and only sometimes, not every time I return to the slider's page. I'm using WordPress + Gutenberg + ACF, and jQuery 3.3.1. WordPress did just upgrade the jQuery version it comes packaged with to the latest version, and I wonder if perhaps Slick isn't compatible with the latest version of jQuery. Did you figure out how to resolve this issue?

[leGenti]

@superfein Hi Zach, I found a way to "fix it". I used nextjs' { useEffect } to reload my page after someone navigates to that page. I know this is not the best solution, but a quick workaround. The solution Joel mentioned probably works, but I'm too stupid to implement it.

This is the code i used:

useEffect(() => {
    if( window.localStorage )
    {
        if( !localStorage.getItem('firstLoad') )
        {
        localStorage['firstLoad'] = true;
        window.location.reload();
        }  
        else
        localStorage.removeItem('firstLoad');
    }
});

Like I said, this is not the best solution. Each time you return to a page you see a slight flickering from the reload.