web-dev-qa-db-fra.com

le carrousel de hibou 2 ne fonctionne pas avec la boucle et 1 articles (bug corrigé maintenant)

Je travaille avec le carrousel de hibou 2 pour le contenu du carrousel.

JS:

$('#owl-demo').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 1,
});

HTML:

<div id="owl-demo" class="owl-carousel">
    <div class="item"><h4>1</h4></div>
</div>

Problème:

quand j'ai un contenu (contenu dynamique utilisant PHP) loop:true et items:1 ne fonctionne pas et je vois vide Mais si j'ajoute deux contenus Owl a fonctionné vrai !!

[~ # ~] modifier [~ # ~] : mon contenu est dynamique (1 - ....). lorsque mon résultat est un hibou de contenu a un problème.

Problème DÉMO

travaillé DÉMO

comment résoudre ce problème?

javascriptjqueryhtmlcssowl-carousel
8
Perspolis

Je signale ce bogue au groupe de développeurs Owl et corrige ce problème ici .

Modifiez cette ligne dans Valider

view = Math.max(settings.items * 2, 2),

Maintenant, cela a fonctionné dans démo

9
Perspolis

J'espère que la méthode ci-dessous résoudra votre problème.
Vous n'avez pas besoin de modifier le carrousel de hibou js. La même méthode peut également être appliquée à Bx Slider.

$('.owl-demo').owlCarousel({
    margin: 0,
    responsiveClass: true,
    smartSpeed: 500,
    dots: ($(".owl-carousel .item").length > 1) ? true: false,
    loop:($(".owl-carousel .item").length > 1) ? true: false,
    responsive: {
        0: {
            items: 1,
        },
        500: {
            items: 1,
        },
        768: {
            items: 1,
        }
    } 
})
5
fluidbrush

J'ai utilisé cette méthode pour résoudre le problème et je pense que c'est assez facile.

var options={
    margin: 10,
    nav: true,
    items: 1
    };
   if($('#owl-demo .owl-item').length>1){
       options.loop=true;
   }
   $('#owl-demo').owlCarousel(options);
4
Tohid Dadashnezhad

Vous pouvez vérifier le nombre d'éléments .item avant d'appeler votre plugin comme ceci:

// Be more specific with your selector if .items is used elsewhere on the page. 
var items = $('.items');
if(items.length > 1) {
    $('#owl-demo').owlCarousel({
        loop: true,
        ...
    });
} else {
    // same as above but with loop: false;
}
3
CaldwellYSR

Si vous ne voulez mettre qu'une seule image dans owlCarousel en tant qu'image de bannière, vous pouvez ajouter un argument dans housl carrousel js.

singleItem: true

comme ça:

<script type="text/javascript">
    $(document).ready(function() {
        $('#main_banner').owlCarousel({
            margin: 0,
            loop: true,
            navText: [ "<img src='images/leftArrow.png'>", "<img src='images/rightArrow.png'>" ],
            dots: false,
            items :1,
            autoplay: true,
            singleItem: true
        });
    });
    </script>
1
Ashish v