jquery – 猫头鹰旋转木马2个物品堆叠在彼此的顶部

我试图将图像分组为8,并将每个分组用作Owl Carousel的单独幻灯片.然而,这些分组并不像垂直堆叠,而是垂直堆叠.

我的猫头鹰设置：

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

生成HTML的PHP(使用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; ?>

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

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

.gallery{
	width: 1000px;
}

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

我不知道这是否与它有任何关系,但有一点需要注意的是,我对某些元素(如我的页眉和页脚)使用负边距来展开背景颜色.也许这正在影响事情？

解决方法@H_403_20@

我使用以下CSS找到了一个解决方案：

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

感觉很奇怪,我需要补充一点.你会认为插件可以自己处理这个.这也是一个凌乱的解决方案,因为所有的图像都加载不好的方式,然后转向正确的方式,所以我必须挂钩到转盘init事件来淡出它,只是感觉像很多环所以如果有人知道一个更好的解决方案,请随时让我知道.

jquery – 猫头鹰旋转木马2个物品堆叠在彼此的顶部

猜你在找的jQuery相关文章