Deaktivierung von Owl Carousel bei einer bestimmten Breite des Darstellungsbereichs

Question

Ich verwende derzeit das Owl Carousel, um eine Galerie auf Desktop/Laptop-Geräten anzuzeigen. Bei kleineren Geräten möchte ich jedoch das Plugin deaktivieren und jedes Bild übereinander anzeigen.

Ist das möglich? Ich bin mir bewusst, dass Sie Owl Carousel optimieren können, um eine bestimmte Anzahl von Bildern auf dem Bildschirm an bestimmten Haltepunkten zu zeigen. Aber ich möchte in der Lage sein, um es vollständig zu deaktivieren, entfernen Sie alle divs usw.

Hier ist ein Stift von dem, was ich gerade arbeite mit im Moment: http://codepen.io/abbasinho/pen/razXdN

HTML:

<div id="carousel"> 
    <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg);"> 
    </div> 
    <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg);"> 
    </div> 
    <div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg);"> 
    </div> 
</div> 

CSS:

#carousel { 
    width: 100%; 
    height: 500px; 
} 

.carousel-item { 
    width: 100%; 
    height: 500px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

jQuery:

$("#carousel").owlCarousel({ 
     navigation : true, 
     slideSpeed : 300, 
     paginationSpeed : 400, 
     singleItem: true 
}); 

Jede Hilfe wird wie immer dankbar angenommen!

Answer 1

Einfach, verwenden Sie jquery. Fügen Sie dem Container-div des Karussells eine Klasse hinzu, zum Beispiel "<div id="carousel class='is_hidden'>" mit einigen CSS, zum Beispiel ".is_hidden{display:none;}". Verwenden Sie dann jquery, um die Klasse zu entfernen, oder fügen Sie die Klasse je nach Fensterbreite hinzu.

Answer 2

Ich musste Plugin deaktivieren, wenn die Bildschirmbreite größer als 854px ist. Sicher, Sie können den Code an Ihre Bedürfnisse anpassen. Hier ist meine Lösung:

1. Überprüfen Sie die Darstellungsbreite vor Aufruf der Plugin.
2. Wenn die Breite gut ist, um das Plugin aufzurufen, rufen Sie das Plugin auf. Else fügen Sie die Klasse 'off' hinzu, um anzuzeigen, dass das Plugin bereits aufgerufen und zerstört wurde.
3. Bei der Größenänderung:
   3.1. Wenn die Breite gut ist, um das Plugin aufzurufen UND das Plugin wurde noch nicht aufgerufen oder es wurde früher zerstört (Ich benutze die 'off' Klasse, um es zu wissen), dann rufen Sie das Plugin.
   3.2. Wenn die Breite nicht gut ist, um das Plugin aufzurufen UND das Plugin jetzt aktiv ist, dann zerstöre es mit Owl's Triggerereignis destroy.owl.carousel und entferne das unnötige Wrapper-Element 'owl-stage-outer' danach.

$(function() { 
    var owl = $('.owl-carousel'), 
     owlOptions = { 
      loop: false, 
      margin: 10, 
      responsive: { 
       0: { 
        items: 2 
       } 
      } 
     }; 

    if ($(window).width() < 854) { 
     var owlActive = owl.owlCarousel(owlOptions); 
    } else { 
     owl.addClass('off'); 
    } 

    $(window).resize(function() { 
     if ($(window).width() < 854) { 
      if ($('.owl-carousel').hasClass('off')) { 
       var owlActive = owl.owlCarousel(owlOptions); 
       owl.removeClass('off'); 
      } 
     } else { 
      if (!$('.owl-carousel').hasClass('off')) { 
       owl.addClass('off').trigger('destroy.owl.carousel'); 
       owl.find('.owl-stage-outer').children(':eq(0)').unwrap(); 
      } 
     } 
    }); 
}); 

Und ein bisschen CSS deaktiviert Owl Element zu zeigen:

.owl-carousel.off { 
    display: block; 
} 

Answer 3

mcmimik's answer korrekt ist, aber ich hatte eine Änderung zu machen, es für mich zu arbeiten.

In der Funktion:

$(window).resize(function() { 
    if ($(window).width() < 641) { 
     if ($('.owl-carousel').hasClass('off')) { 
      var owlActive = owl.owlCarousel(owlOptions); 
      owl.removeClass('off'); 
     } 
    } else { 
     if (!$('.owl-carousel').hasClass('off')) { 
      owl.addClass('off').trigger('destroy.owl.carousel'); 
      owl.find('.owl-stage-outer').children(':eq(0)').unwrap(); 
     } 
    } 
}); 

auslagern owl.addClass('off').trigger('destroy.owl.carousel'); für owl.addClass('off').data("owlCarousel").destroy();:

$(window).resize(function() { 
    if ($(window).width() < 641) { 
     if ($('.owl-carousel').hasClass('off')) { 
      var owlActive = owl.owlCarousel(owlOptions); 
      owl.removeClass('off'); 
     } 
    } else { 
     if (!$('.owl-carousel').hasClass('off')) { 
      owl.addClass('off').data("owlCarousel").destroy(); 
      owl.find('.owl-stage-outer').children(':eq(0)').unwrap(); 
     } 
    } 
}); 

Answer 4

einfacher, eine CSS-basierte Lösung

@media screen and (max-width: 992px) { 
 
    .owl-item.cloned{ 
 
    display: none !important; 
 
    } 
 
    .owl-stage{ 
 
    transform:none !important; 
 
    transition: none !important; 
 
    width: auto !important; 
 
    } 
 
    .owl-item{ 
 
    width: auto !important; 
 
    } 
 
}

zu verwenden