web-dev-qa-db-fra.com

Carrousel de hibou - Les objets s'empilent les uns sur les autres

J'essaie de regrouper les images en groupes de 8 et d'utiliser chaque groupe comme une diapositive distincte pour Owl Carousel. Cependant, plutôt que de les empiler horizontalement comme d'habitude, les regroupements sont simplement empilés verticalement.

Mes paramètres de hibou:

//Gallery carousel
gallery();
function gallery(){
  $('.gallery').owlCarousel({
    margin: 10,
    nav: true,
    items: 1,
  });
}

Le php générant le HTML (utilise le plugin de galerie ACF pour WordPress)

<!-- Gallery Thumbs -->
<?php 
$images = get_field('gallery');

if( $images ): ?>
    <div class="gallery">
        <div class="gallery-group"><!-- Group the images in pairs of 8 -->
            <?php $i = 0; ?>

            <?php foreach( $images as $image ): ?>

                <?php $caption = $image['caption']; ?>
                    <a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </a>

                <?php if ($caption): ?>
                    <p><?php echo $caption; ?></p>
                <?php endif; ?>

                <?php $i++; ?>

                <?php if ($i % 8 == 0): ?>
                    </div>
                    <div class="gallery-group">
                <?php endif; ?>

            <?php endforeach; ?>
        </div>
    </div>
<?php endif; ?>

J'ai obtenu le CSS suivant qui s'applique au carrousel:

.hentry{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gallery{
  width: 1000px;
}</code>
J'ai inclus owl.carousel.min.css et owl.theme.default.min.css, et j'utilise la dernière version de jQuery. Aucune erreur dans la console.
Je ne sais pas si cela a quelque chose à voir avec cela, mais une chose à noter est que j'utilise des marges négatives sur certains éléments comme mon en-tête et pied de page pour étirer les couleurs d'arrière-plan. Peut-être que cela affecte les choses?
jqueryhtmlcssowl-carousel
 17 
Jordan Carter
J'ai trouvé une solution à cela en utilisant le SCSS suivant:
.gallery{
        max-width: 1000px;
        width: 100%;
        overflow-x: hidden;
        
        .owl-stage{
                display: flex;
        }
}
Cela me semble étrange de voir comment je dois ajouter cela. On pourrait penser que le plugin serait capable de gérer cela tout seul. C'est aussi une solution compliquée, car toutes les images se chargent dans le mauvais sens, puis se déplacent dans le bon sens, donc je dois m'accrocher à l'événement d'initialisation du carrousel pour le fondre. , donc si quelqu'un connaît une meilleure solution, n'hésitez pas à me le faire savoir.
 15 
Jordan Carter
Le problème est que, pour une raison quelconque, owl n'ajoute pas sa classe "owl-carrousel" à l'élément principal de sorte que ses styles ne fonctionnent pas. Ajoutez-le manuellement et ce sera bon d'aller.
$('.gallery').addClass('owl-carousel').owlCarousel({
        margin: 10,
        nav: true,
        items: 1,
});

 9 
Hlsg
Les autres réponses n'ont pas fonctionné pour moi.
Cependant, j'ai pu le faire fonctionner avec le correctif suivant:
FICHIER CSS
.owl-stage{
        display: flex;
}

Ensuite, ajoutez le carrousel de chouette de classe CSS à la div principale
<div class="gallery owl-carousel">

 1 
TroySteven