web-dev-qa-db-fra.com

Désactivation de Owl Carousel à une largeur de fenêtre donnée

J'utilise actuellement Owl Carousel pour afficher une galerie sur des périphériques de la taille d'un ordinateur de bureau/ordinateur portable. Cependant, sur des appareils plus petits, je voudrais désactiver le plug-in et afficher chaque image empilée les unes sous les autres.

Est-ce possible? Je sais que vous pouvez modifier le carrousel de la chouette pour afficher un certain nombre d'images à l'écran à certains points d'arrêt. Mais j'aimerais pouvoir l'éteindre complètement, en supprimant tous les divs, etc.

Voici un stylo de ce avec quoi je travaille actuellement: 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 reçue avec gratitude, comme toujours!

javascriptjquerycsscarouselowl-carousel
11
abbas_arezoo

Je devais désactiver le plug-in si la largeur de l'écran est supérieure à 854px. Bien sûr, vous pouvez modifier le code pour répondre à vos besoins. Voici ma solution:

  1. Vérifiez la largeur de la fenêtre d'affichage avant d'appeler le plugin.
  2. Si width est utile pour appeler le plugin, appelez le plugin. Sinon, ajoutez la classe 'off' pour montrer que le plugin a déjà été appelé et détruit.
  3. Lors du redimensionnement:
    3.1. Si width est utile pour appeler le plugin ET si le plugin n'a pas encore été appelé ou s'il a été détruit plus tôt (j'utilise la classe 'off' pour le connaître), ALORS appelez le plugin.
    3.2. si width n'appelle pas le plugin ET que celui-ci est actif, ALORS le détruire à l'aide de l'événement déclencheur de Owl destroy.owl.carousel et supprimer l'élément de protection inutile 'owl-stage-outer' après celui-ci.
$(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 montrer l’élément Owl désactivé:

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

Plus facile à utiliser une solution basée sur CSS

@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;
  }
}

7
Mark Williams

La réponse de mcmimik est correcte, mais je devais 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();
        }
    }
});

Echangez owl.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();
        }
    }
});
4
Aline Vianna
function owlInitialize() {
   if ($(window).width() < 1024) {
      $('#carousel').owlCarousel();
   }else{
      $('#carousel').owlCarousel('destroy');
   }
}

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

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

Violon de travail: https://jsfiddle.net/j6qk4pq8/187/

3
Roy van Wensen

Simple, utilisez jQuery. Ajoutez une classe au conteneur div du carrousel, par exemple "<div id="carousel class='is_hidden'>" avec certains CSS, par exemple ".is_hidden{display:none;}". Utilisez ensuite jquery pour supprimer la classe ou ajoutez-la en fonction de la largeur de la fenêtre.

0
Gavin Simpson