我试图将图像分组为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.控制台中没有错误.
我不知道这是否与它有任何关系,但有一点需要注意的是,我对某些元素(如我的页眉和页脚)使用负边距来展开背景颜色.也许这正在影响事情？
解决方法
我使用以下CSS找到了一个解决方案：
.gallery{
max-width: 1000px;
width: 100%;
overflow-x: hidden;
.owl-stage{
display: flex;
}
}
感觉很奇怪,我需要补充一点.你会认为插件可以自己处理这个.这也是一个凌乱的解决方案,因为所有的图像都加载不好的方式,然后转向正确的方式,所以我必须挂钩到转盘init事件来淡出它,只是感觉像很多环所以如果有人知道一个更好的解决方案,请随时让我知道.