Owl Carousel - 物品堆叠在一起答案

【问题标题】：Owl Carousel - Items are stacking on top of each otherOwl Carousel - 物品堆叠在一起
【发布时间】：2017-04-27 15:42:04
【问题描述】：

我正在尝试将图像分组为 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，并且我正在运行最新版本的jQuery。控制台中没有错误。

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

【问题讨论】：

我认为它们正在堆叠，因为所有 8 个图像都无法放入您的容器中，请尝试使用 6 并查看它是否有效。您还可以将图像缩小，以便将所有 8 个图像都放在那里。
不过，我希望它们能换行。不是那样包裹，但仍然包裹。我不希望它们都在一条线上。
有没有办法准确显示您想要的结果？
看我的回答。我或多或少得到了我想要的方式。只是需要将图像整理得更好一点，但我可以做到。
您应该将owl-carousel 类添加到您的.gallary 元素（轮播容器）中。

标签： jquery html css owl-carousel

【解决方案1】：

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

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

只是感觉很奇怪我需要添加它。你会认为插件能够自己处理这个问题。这也是一个混乱的解决方案，因为所有图像都以错误的方式加载，然后转移到正确的方式，所以我必须连接到 carousel init 事件才能将其淡入。感觉就像很多箍要经过，所以如果有人知道更好的解决方案，请随时告诉我。

【讨论】：

我也遇到了 Glider.js 的问题，与您的帖子中描述的相同，这解决了它。非常感谢！
嗯，这也不能正常工作。因为如果你有 5 个项目，然后你只想让其中三个可见，那么通过滚动就不可能到达另外两个。我遇到了同样的问题，我无法解决。除此之外还有什么解决办法？

【解决方案2】：

问题在于，出于某种原因，owl 没有将其“owl-carousel”类添加到主元素中，因此它的样式不起作用。手动添加就好了。

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

【讨论】：

【解决方案3】：

其他回复对我不起作用。

但是我能够通过以下修复使其正常工作：

CSS 文件

.owl-stage{
        display: flex;
}

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

<div class="gallery owl-carousel">

【讨论】：

【解决方案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;
}

$("#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。

【讨论】：