Destroy multiple sliders at once

Question

I want to destroy all my sliders when the page hit the size of 768px. For this I made this code below:

if($(window).width() >= 768){
    $(".owl-carousel-linhas").data('owlCarousel').destroy();
}

I have on my page several sliders so:

<div class="owl-carousel-linhas">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="owl-carousel-linhas">
   <div class="item"></div>
   <div class="item"></div>
</div>

<div class="owl-carousel-linhas">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>

And the code I made above destroys only the first slider, the rest not.

Answer 1

Based on your comment, I’m going to make a change that might solve your problem by putting this code inside your if:

while($(".owl-carousel-linhas").length > 0){
    $($(".owl-carousel-linhas")[0]).data('owlCarousel').destroy();
}

Check if this solves your problem.

Answer 2

I managed to fix it. It was simple, until.

$(".owl-carousel-linhas").each(function (index, obj){
    $(this).data('owlCarousel').destroy();
});

I switched the obj for $(this).