Slick, multiple sliders with the same class?

Question

Slick

there are 6 tabs, and each tab has its own slider. I created the same structure and gave the same class for each slider, which I then tied to slick in js

<div class="wrapper">
  <div class="tab">
    <div class="slider"></div>
  </div>
  <div class="tab">
    <div class="slider"></div>
  </div>
  <div class="tab">
    <div class="slider"></div>
  </div>
  <div class="tab">
    <div class="slider"></div>
  </div>
  <div class="tab">
    <div class="slider"></div>
  </div>
  <div class="tab">
    <div class="slider"></div>
  </div>
</div>




$('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

But when switching tabs, the slider works with an error, it doesn’t show right away until I change the slide and such an error when changing the tab

Uncaught TypeError: Cannot read property 'add' of null

I think that several sliders should be assigned differently, can you tell me how?

Answer 1

On the tab change event, you need to hang the slick method reinit