D
D
Dima Pautov2016-08-16 12:16:30
JavaScript
Dima Pautov, 2016-08-16 12:16:30

How to relaunch a slick slider after it has been destroyed using the slick('unslick') method?

Good afternoon. I had such an attack. I need to get the markup with ajax and insert it into the slider.
How everything works for me:
By clicking on the button, a modal window appears, after the event of the full opening of the modal window is triggered, I start the initialization of the slider, because in a hidden block, it does not correctly calculate the width of the slides, which is generally logical. Further, after the initialization of the slider, along the chain of methods, I insert the markup received by ajax into it and paste it.
Next, after the window is completely closed, I need to destroy the slider and clear it of slides.

$.ajax({
     	url: '/app/ajax/detail/index.php?user='+user+'&iblock='+iblock,
     	type: 'GET',
     	dataType: 'html',
    }).done(function(items){

      var clientThanksCarousel = $('#clientThanksCarousel');
      
      if(items){

        clientThanksModal
          .modal('show')
          .on('shown.bs.modal', function(){

            clientThanksCarousel
              .slick({
                slidesToShow: 2,
                responsive: [
                  {
                    breakpoint: 570,
                    settings: {
                      slidesToShow: 1
                    }
                  }
                ]
              })
              .slick('slickAdd', items);

          })
          .on('hidden.bs.modal', function(){

            clientThanksCarousel
              .slick('unslick')
              .empty();

          });

      }
    
    });

But that's not the problem, if you call all this again, so that the slider is re-initialized and inserts new slides, it gives me an error. Uncaught TypeError: Cannot read property 'add' of null . I watched in the console what it does with the markup. He cleans it up completely. But it doesn't want to restart.
Please help, I've already broken my head, what should I do!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
profesor08, 2016-08-16
@profesor08

I watched in the console what it does with the markup. He cleans it up completely.

Well, here is your problem. After clientThanksCarousel.slick('unslick').empty();that, the element itself is removed #clientThanksCarouselfrom the page, or you delete it somehow. Since the next time you call you have an error.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question