猫头鹰旋转木马 - 物品堆叠在一起

I'm trying to group images into groups of 8, and use each grouping as a separate slide for Owl Carousel. However, rather than stacking horizontally like normal, the groupings are just stacked vertically.

我正在尝试将图像分组为8个组，并将每个分组用作Owl Carousel的单独幻灯片。但是，与正常情况下水平堆叠不同，分组只是垂直堆叠。

My owl settings:

我的猫头鹰设置：

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

The php generating the HTML (uses ACF gallery plugin for WordPress)

php生成HTML（使用WordPress的ACF图库插件）

<!-- 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; ?>

I got the following CSS that applies to the carousel:

我得到了以下适用于轮播的CSS：

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

.gallery{
	width: 1000px;
}

I included owl.carousel.min.css, owl.theme.default.min.css and owl.carousel.min.js. I'm running the latest version of jQuery. No errors in the console.

我包括owl.carousel.min.css，owl.theme.default.min.css和owl.carousel.min.js。我正在运行最新版本的jQuery。控制台中没有错误。

I'm not sure if this has anything to do with it, but one thing to note is that I use negative margins on some elements like my header and footer to stretch out background colours. Perhaps this is affecting things?

我不确定这是否与它有任何关系，但有一点需要注意的是，我在一些元素（如页眉和页脚）上使用负边距来拉伸背景颜色。也许这会影响事情？

2 个解决方案

#1

I found a solution to this using the following SCSS:

我使用以下SCSS找到了解决方案：

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

It just feels strange how I need to add that. You'd think the plugin would be able to handle this on its own. It's also a messy solution, because all of the images load the bad way, and then shift to the proper way, so I have to hook on to the carousel init event to fade it in. Just feels like a lot of hoops to go through, so if anybody knows a better solution, please feel free to let me know.

我需要添加它，这感觉很奇怪。您认为该插件可以自行处理。这也是一个混乱的解决方案，因为所有的图像加载了坏的方式，然后转移到正确的方式，所以我必须挂钩到carousel init事件以淡入它。只是感觉像很多篮球通过，如果有人知道更好的解决方案，请随时告诉我。

#2

The trouble is that for some reason owl is not adding it's "owl-carousel" class to the main element so it's styles aren't working. Add it manually and it'll be good.

麻烦的是，由于某种原因，owl没有将它的“owl-carousel”类添加到主元素中，因此它的样式不起作用。手动添加它会很好。

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

#1