Сова Карусель - предметы складываются друг на друга

Я пытаюсь сгруппировать изображения в группы по 8 и использовать каждую группировку как отдельный слайд для карусели сов. Однако, вместо того, чтобы складывать горизонтально, как обычно, группировки просто складываются вертикально.

Мои настройки совы:

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

PHP, генерирующий HTML (использует плагин галереи ACF для 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; ?>

Я получил следующий CSS, который относится к карусели:

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

.gallery{
  width: 1000px;
}

Ответ 1

Я нашел решение для этого, используя следующий SCSS:

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

Ответ 2

Проблема в том, что по какой-то причине owl не добавляет свой класс "owl-carousel" к основному элементу, поэтому его стили не работают. Добавьте это вручную, и это будет хорошо идти.

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

Ответ 3

Другие ответы не помогли мне.

Однако я смог заставить его работать со следующим исправлением:

CSS FILE

.owl-stage{
        display: flex;
}

Затем добавьте сову-карусель класса CSS в основной раздел

<div class="gallery owl-carousel">