owl 轮播 2 不适用于循环和 1 个项目（错误已修复）

Question

我使用 owl carousel 2 来处理轮播内容。

JS:

$('#owl-demo').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 1,
});

HTML:

<div id="owl-demo" class="owl-carousel">
    <div class="item"><h4>1</h4></div>
</div>

问题：

当我有一个内容（使用 PHP 的动态内容）时 loop:true 和 items:1 不起作用，我看到空白但是如果我添加两个内容 Owl 有效!!

编辑：我的内容是动态的（1 - ....）。当我的结果是一个内容时owl有问题

问题DEMO

工作 DEMO

如何解决这个问题？

Answer 1

您可以在调用插件之前检查 .item 元素的数量，如下所示：

// Be more specific with your selector if .items is used elsewhere on the page. 
var items = $('.items');
if(items.length > 1) {
    $('#owl-demo').owlCarousel({
        loop: true,
        ...
    });
} else {
    // same as above but with loop: false;
}

Answer 2

我将此错误报告给 Owl 开发人员组并修复此问题 here。

在 Commit

中更改此行

view = Math.max(settings.items * 2, 2),

现在这在 demo

中起作用了

Answer 3

如果你只想在 owlCarousel 中放置一张图片作为横幅图片，那么你可以在 owlcarousel js 中添加一个参数。

singleItem: true

像这样：

<script type="text/javascript">
    $(document).ready(function() {
        $('#main_banner').owlCarousel({
            margin: 0,
            loop: true,
            navText: [ "<img src='images/leftArrow.png'>", "<img src='images/rightArrow.png'>" ],
            dots: false,
            items :1,
            autoplay: true,
            singleItem: true
        });
    });
    </script>

Answer 4

我用这个方法解决了这个问题，我觉得很简单。

var options={
    margin: 10,
    nav: true,
    items: 1
    };
   if($('#owl-demo .owl-item').length>1){
       options.loop=true;
   }
   $('#owl-demo').owlCarousel(options);

Answer 5

希望下面的方法能解决您的问题。
您不需要编辑 owl carousel js。同样的方法也可以应用于 Bx Slider。

$('.owl-demo').owlCarousel({
    margin: 0,
    responsiveClass: true,
    smartSpeed: 500,
    dots: ($(".owl-carousel .item").length > 1) ? true: false,
    loop:($(".owl-carousel .item").length > 1) ? true: false,
    responsive: {
        0: {
            items: 1,
        },
        500: {
            items: 1,
        },
        768: {
            items: 1,
        }
    } 
})

Answer 6

$('#owl-demo').owlCarousel({ loop: true, margin: 10, nav: true, items: 1, responsive:{ 0:{ items:1, nav:true, loop:true }, 600:{ items:1, nav:false, loop:true }, 1000:{ items:1, nav:true, loop:true } } });

Answer 7

在我的项目中，一位家长设置了参数max-width：410px。
如果轮播有一个项目，小图像不居中。
修复：将参数从 max-width 更改为 const width.

Owl轮播v2.3.4

owl 轮播 2 不适用于循环和 1 个项目（错误已修复）

owl carousel 2 not work with loop and 1 items (Bug Fixed Now)

html

javascript

css

jquery

owl-carousel