web-dev-qa-db-fra.com

Owl Carousel - la largeur est mal calculée

J'ai trois éléments sensibles (imgs), mais chaque fois que le hibou-carrousel est chargé, la largeur de hibou-wrapper est deux fois la taille de toutes les images ensemble. Par exemple; si les images prennent 1583 pixels, le owl-wrapper prend 1583 * 3 * 2 = 9498px, et tous les sites utilisent cette largeur au lieu de la taille normale (1583 pixels).

Le problème: http://nacionalempreendimen.web2144.uni5.net

HTML

<div id="promoted-carousel">
    <div class="item"><img src="assets/img/tmp/1.jpg"></div>
    <div class="item"><img src="assets/img/tmp/2.jpg"></div>
    <div class="item"><img src="assets/img/tmp/3.jpg"></div>
</div>

CSS

#promoted-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

JS

$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});

UPDATE

J'ai vu que lorsque je mets #promoted-carousel div sur .page-wrapper div, cela fonctionne correctement. Mais ma connaissance des CSS n’est pas suffisante pour comprendre pourquoi cela fonctionne.

javascriptjqueryhtmlcssowl-carousel
7
Vinicius Ottoni

J'utilise souvent deux emballages lorsque je travaille avec Owl Carousel. Je définissais tous mes styles par diapositive en fonction de leur hauteur/largeur, etc., et de l'emballage extérieur, de la largeur de la scène, etc.

J'appelle ensuite hibou carrousel sur l'emballage intérieur et j'ai généralement très peu de problèmes

<div id="promoted-carousel-outer">
    <div id="promoted-carousel">
        <div class="item"><img src="assets/img/tmp/1.jpg"></div>
        <div class="item"><img src="assets/img/tmp/2.jpg"></div>
        <div class="item"><img src="assets/img/tmp/3.jpg"></div>
    </div>
</div>
1
Anto

ça m'a aidé:

setTimeout(function() {
    $('#promoted-carousel').owlCarousel({
        autoPlay: 5000,
        stopOnHover: true,
        singleItem: true
    });
}, 10);
0
maLikiz

cette solution m'a aidé aussi, si votre thème utilise bootstrap 4 et que le plugin owl utilise bootstrap 3, cela résoudra le problème de la largeur de hibou 

 setTimeout(function() {
$('#promoted-carousel').owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    singleItem: true
});
}, 10);
0
Disney Land 2017

Incroyablement, je soupçonne que cela pourrait être un bug dans owlCarousel.

Ce qui m'a aidé a été de supprimer le * 2 dans appendWrapperSizes:

    appendWrapperSizes : function () {
        var base = this,
            width = base.$owlItems.length * base.itemWidth;

        base.$owlWrapper.css({
            "width": width,//Comment out this part=> * 2,
            "left": 0
        });
        base.appendItemsSizes();
    },

Cela a fonctionné pour owlCarousel 1.3.3.

0
Michael Litvin