question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"refresh" method deletes the slides when reinitialising the slider.

See original GitHub issue

Issue Description

I’m responsively unslicking my slider and with Slick v1.8.1 I was able to $('.my-slider').slick('refresh'); to reinitialise the slider, however with this fork, it does attempt to reinitialise the slider but all the slides are removed and the .slick-track is completely empty.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:1
  • Comments:7

github_iconTop GitHub Comments

2reactions
jasonwebbcommented, Aug 11, 2021

Thanks for putting that together! I can confirm that this is an issue that seems to be present in accessible-slick, but not the original Slick library. But I haven’t been able to figure out the cause of it yet.

There haven’t been any changes made to either the unslick or refresh functionality directly, so whatever is going on seems like it must be a side effect to some unrelated changes.

So far I’ve found that the unslick option is really just an alias for the destroy() method, and the destroy() method is already called by the refresh() method. So in your example, when you “unslick” the carousel and try to do a refresh, the carousel gets destroyed twice. When the second destroy() call is made inside the refresh method, the slides get removed from the DOM entirely. I think I’ve narrowed down the problem down to this line of code in the cleanUpRows() method, but I understand yet what is going on. Seems like there is some hand-wavy jQuery magic going on that is making the issue really tricky to trace.

I’m also seeing that the refresh() method is not officially documented or demonstrated in the original library’s README or docpage, so the intended purpose and proper usage is a bit unclear to me. As a short term solution, I wonder if you can get the results you want by re-initializing Slick entirely instead of trying to use the refresh option, like the snippet below. But since I do really want this package to be a true drop-in replacement for Slick Slider, I want to resolve this issue regardless - I’m just not sure how long that’ll take.

$(".reslick").on("click", function() {
  $(".my-slider").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,
    dots: false,
    centerMode: true,
  });
});

If you, or anyone else, has any ideas for what could be going on here, please let me know!

1reaction
mitchell-ionatacommented, Aug 12, 2021

Thanks for looking into it! Yeah I just happened to stumble upon the refresh method when looking into how to easily reinitialise my slider after it has been unslicked so it’s definitely possible how I’m using it is not intended.

I’ll have a poke around myself if I find the time, cheers!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Clearing and adding slides / Reinitialising flexslider?
Step 1 - remove existing slides: var slider = $('.flexslider'); while (slider.data('flexslider').count > 0) slider.data('flexslider').
Read more >
Add or delete slides in Keynote on Mac - Apple Support
Delete a slide​​ In the slide navigator, click to select a slide or select multiple slides, then press Delete on your keyboard.
Read more >
Add & Remove Slides - Embla Carousel
This guide demonstrates how to add or remove slides after Embla Carousel has been initialized.
Read more >
Swiper API
Slides --> <div class="swiper-slide">Slide 1</div> <div ... querySelector('.swiper').swiper; // Now you can use all slider methods like swiper.slideNext(); ...
Read more >
Documentation v5 - Keen-Slider
Documentation of the installation and usage of keen-slider library v5. ... class="keen-slider"> <div class="keen-slider__slide">1</div> <div ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found