Désactivation du carrousel hibou à une largeur de fenêtre spécifique
Je suis actuellement en utilisant Owl Carousel pour afficher une galerie de bureau/ordinateur portable taille des appareils. Cependant sur des appareils plus petits, je voudrais désactiver le plugin et afficher chaque image empilée au-dessous l'un de l'autre.
Est-ce possible? Je suis conscient que vous pouvez modifier à votre Hibou Carrousel à montrer un certain nombre d'images sur l'écran à certains points d'arrêt. Mais je voudrais être en mesure de l'éteindre complètement, la suppression de tous les divs etc.
Voici un stylo de ce que je suis en train de travailler avec pour le 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
});
Toute aide est la bienvenue comme jamais!
source d'informationauteur abbas_arezoo
Vous devez vous connecter pour publier un commentaire.
J'ai dû désactiver le plugin si le la largeur de l'écran est plus grand que 854px. Bien sûr, vous pouvez modifier le code pour l'adapter à vos besoins. Voici ma solution:
3.1. Si la largeur est bonne pour appeler le plugin ET le plugin n'a pas été appelé encore ou il a été détruit plus tôt (j'utilise le
'off'
classe pour le savoir), PUIS d'appeler le plugin.3.2. si la largeur n'est pas bon pour appeler le plugin ET le plugin est maintenant actif, PUIS de la détruire avec la Chouette événement déclencheur
destroy.owl.carousel
et supprimer l'inutile élément wrapper'owl-stage-outer'
après.Et un peu de CSS pour afficher les handicapés Chouette élément:
mcmimik réponse est correct, mais j'ai dû faire un changement pour que cela fonctionne pour moi.
Dans la fonction:
Échanger
owl.addClass('off').trigger('destroy.owl.carousel');
pourowl.addClass('off').data("owlCarousel").destroy();
:Simple, l'utilisation de jquery. Ajouter une classe au carrousel du div conteneur, par exemple "
<div id="carousel class='is_hidden'>
" avec un peu de css par exemple ".is_hidden{display:none;}
". Puis utiliser jquery pour supprimer la classe, ou ajouter la classe, en fonction de la largeur de la fenêtre.De Travail Violon:
https://jsfiddle.net/j6qk4pq8/187/