jquery - dots - owl carousel wordpress

Carrusel del búho-los artículos se apilan uno encima del otro

Question

Estoy tratando de agrupar imágenes en grupos de 8, y usar cada agrupación como una diapositiva separada para Owl Carousel. Sin embargo, en lugar de apilar horizontalmente como de costumbre, las agrupaciones solo se apilan verticalmente.

Mis configuraciones de búho:

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

El PHP que genera el HTML (usa el complemento de galería ACF para 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; ?>

Tengo el siguiente CSS que se aplica al carrusel:

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

He incluido owl.carousel.min.css y owl.theme.default.min.css , y estoy ejecutando la última versión de jQuery. No hay errores en la consola.

No estoy seguro de si esto tiene algo que ver con esto, pero una cosa a tener en cuenta es que uso márgenes negativos en algunos elementos como el encabezado y el pie de página para extender los colores de fondo. Tal vez esto está afectando las cosas?

Answer 1

El problema es que, por alguna razón, Owl no está agregando su clase de "búho-carrusel" al elemento principal, por lo que sus estilos no funcionan. Agrégalo manualmente y estará listo para funcionar.

$(''.gallery'').addClass(''owl-carousel'').owlCarousel({
margin: 10,
nav: true,
items: 1,
});

Answer 2

Encontré una solución a esto usando el siguiente SCSS:

.gallery{
max-width: 1000px;
width: 100%;
overflow-x: hidden;
.owl-stage{
display: flex;
}
}

Simplemente se siente extraño cómo necesito agregar eso. Usted pensaría que el plugin podría manejar esto por sí solo. También es una solución desordenada, porque todas las imágenes se cargan de manera incorrecta, y luego cambian a la forma correcta, así que tengo que engancharme al evento de inicio del carrusel para desvanecerse. Simplemente me siento como un montón de cosas por las que pasar. , así que si alguien sabe una mejor solución, no dude en hacérmelo saber.

Answer 3

Las otras respuestas no funcionaron para mí.

Sin embargo, pude hacerlo funcionar con la siguiente solución:

Archivo CSS

.owl-stage{
display: flex;
}

A continuación, agregue la clase css owl-carrusel a la div principal

<div class="gallery owl-carousel">