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

  1. 18

    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:

    1. Vérifier la fenêtre d'affichage de la largeur de avant d'appeler le plugin.
    2. Si la largeur est bonne pour appeler le plugin, appelez le plugin. D'autre ajouter le " off " de la classe pour montrer que si le plugin a déjà été appelé et détruit.
    3. Lors du redimensionnement:

      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.
    $(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();
            }
        }
    });
});

    Et un peu de CSS pour afficher les handicapés Chouette élément:

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

    mcmimik réponse est correct, mais j'ai dû faire un changement pour que cela fonctionne pour moi.

    Dans la fonction:

        $(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();
        }
    }
});

    Échangerowl.addClass('off').trigger('destroy.owl.carousel'); pour 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();
        }
    }
});
  3. 0

    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.

  4. 0
    function owlInitialize() {
   if ($(window).width() < 1024) {
      $('#carousel').owlCarousel();
   }else{
      $('#carousel').owlCarousel('destroy');
   }
}

$(document).ready(function(e) {
   owlInitialize();
});

$(window).resize(function() {
   owlInitialize();
});

    De Travail Violon:
    https://jsfiddle.net/j6qk4pq8/187/