猫头鹰旋转木马 - 项目堆叠在彼此之上 [英] Owl Carousel - Items are stacking on top of each other

问题描述

我试图将图像分组为8个组，并将每个分组用作Owl Carousel的单独幻灯片。但是，不是像平常一样水平堆叠，这些分组只是垂直堆叠。

我的猫头鹰设置：

HTML（为WordPress使用ACF图库插件）

<！ - Gallery大拇指 - > <？php $ images = get_field（'gallery'）; if（$ images）：？> < div class =gallery> < div class =gallery-group><！ - 将图像分成8对 - > <？php $ i = 0; ？> <？php foreach（$ images as $ image）：？> <？php $ caption = $ image ['caption']; ？> < a data-fancybox =galleryhref =<？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为H. <？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;顶部：50％;剩下：50％; transform：translate（-50％，-50％）;}。gallery {width：1000px;}

$ b

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

我不确定这是否与它有任何关系，但有一点需要注意的是，我对某些元素使用了负边距我的页眉和页脚展开背景颜色。也许这是影响的东西？

解决方案

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

  .gallery {max-width：1000px;宽度：100％; overflow-x：hidden; .owl-stage {display：flex;这只是感觉很奇怪，我需要补充一点。你会认为插件可以自己处理这个问题。这也是一个混乱的解决方案，因为所有的图像加载不好的方式，然后转移到正确的方式，所以我必须挂接到传送带初始化事件淡入。只是感觉像很多箍通过，所以如果有人知道更好的解决方案，请随时通知我。
 
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.

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)



<!-- 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:



.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.

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?
解决方案
I found a solution to this using the following 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.

                        
这篇关于猫头鹰旋转木马 - 项目堆叠在彼此之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！