javascript Owl Carousal2 项目 1 和循环真

Owl Carousal2 with items 1 and loop true

提问by Ashish Mehta

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1
  })
});

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
</div>
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>

Console Error : TypeError: items[clones[(clones.length - 1)]] is undefined.this error due to only one item divand property loop trueand item 1. So. any solution at this situation. I know this type of Situation does not occurs but if any solutions please tell me Thanks a lot.

控制台错误：TypeError：items[clone[(clone.length - 1)]] 未定义。这个错误是由于只有一个项目div和属性循环true和项目 1。所以。在这种情况下的任何解决方案。我知道这种情况不会发生，但如果有任何解决方案，请告诉我非常感谢。

回答by Balloonatic

Add onInitialize and check how many items the carousel contains. If the carousel has 1 or less items, set loop to false.

添加 onInitialize 并检查轮播包含多少项目。如果轮播有 1 个或更少的项目，则将 loop 设置为 false。

$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items: 1,
    onInitialize: function (event) {
        if ($('.owl-carousel .item').length <= 1) {
           this.settings.loop = false;
        }
    }
  })
});

回答by Alessandro.Vegna

Try this:

试试这个：

$('.owl-carousel').owlCarousel({
    loop: $('.owl-carousel .item').size() > 1 ? true:false,
    items: 1,
    margin:10,
    nav:true
})

回答by Federico Rodriguez

I made a very basic fix (on the owl.carousel.js file). Check my comment here https://github.com/OwlCarousel2/OwlCarousel2/issues/1200#issuecomment-215254526

我做了一个非常基本的修复（在 owl.carousel.js 文件上）。在此处查看我的评论 https://github.com/OwlCarousel2/OwlCarousel2/issues/1200#issuecomment-215254526

It's an extremely quick & dirty fix. That I'll try to enhance as soon as I can.

这是一个非常快速和肮脏的修复。我会尽快尝试增强。

回答by Naveen L Bhandari

var a = $(".owl-parent");
loop: owl.children().length > 1

Change the selector according to your needs.

根据您的需要更改选择器。

This works too.

这也有效。

回答by stanze

Include owl.carousel.min.cssfile below the jquery.min.jsfile and also include those files at the bottom of the page.

在owl.carousel.min.css文件下方包含文件，jquery.min.js并在页面底部包含这些文件。

回答by React Developer

check this demo

检查这个演示

is this the one you are looking for ?

这是您要找的人吗？

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

回答by Ashish Mehta

   if($(".owl-carousel").length > 0){
        $(".owl-carousel").owlCarousel({
            items: 1,       
            nav: $(".owl-carousel > .item").length <= 1 ? false : true,
            dots: false,
            loop:$(".owl-carousel > .item").length <= 1 ? false : true,
            autoplay:true,
            navText: "",         
        });
    }