Question

我正在尝试将图像分组为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;
}

我已经包含.hentry{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gallery{ width: 1000px; }和owl.carousel.min.css，我正在运行最新版本的jQuery。控制台中没有错误。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

Answer 2

麻烦的是，由于某些原因，猫头鹰没有添加它的＆＃34; owl-carousel＆＃34; class to main元素因此它的样式不起作用。手动添加它会很好。

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

Answer 3

其他回复对我不起作用。

但是我可以通过以下修复程序使它起作用：

CSS文件

.owl-stage{
        display: flex;
}

然后将css类owl-carousel添加到主div

<div class="gallery owl-carousel">

Answer 4

这是我的工作代码：

css

.owl-image {
    max-width: 100%;
    height: auto;
}

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
}

.owl-carousel {
    max-width: 1000px;
    width: 100%;
    overflow-x: hidden;
}

.owl-carousel .owl-stage {
    display: block;
    margin: 0 auto;
}

js

$("#home-owl-carousel").owlCarousel({
    margin:10,
    autoWidth:true,
    loop: !singleImage,
    lazyLoad:true,
    responsiveClass:true,
    responsive: {
        0:{ items: 1 },
        576:{ items: 3 },
        768:{ items: 5 },
    },
    autoplay: true,
    autoplayHoverPause: true,
    autoplayTimeout: 3000,
    smartSpeed:750
});

编辑：并非在所有屏幕尺寸上都有效。从那以后，我切换到了swiper js。

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

4 个答案: