猫头鹰旋转木马中的空物品

Empty item in Owl Carousel

本文关键字：旋转木马 猫头鹰      更新时间：2023-09-26

我对猫头鹰旋转木马有问题。我在owl中有10个项目，在循环中，在第10个项目之后，有一个额外的空白项目。我怎样才能去掉那个空白项呢?

这是我的js代码猫头鹰:

<script type="text/javascript">
    $(document).ready(function() {
        $("#owl-example").owlCarousel({
            navigation : false, // Show next and prev buttons
            pagination : false,
            loop : true,
            autoplay : false,
            slideSpeed : 300,
            paginationSpeed : 400,
            items : 1 
        }); 
    });
</script>

我也遇到过同样的问题。经过一些研究和试验，我发现删除HTML中的所有空白解决了这个问题。

检查是否添加了css文件

    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

我试过这个并解决了我的问题。

#ba.owl-theme .owl-dots .owl-dot:last-child {
  display: none;
}

只要设置loop: false就可以解决了!此外，如果需要循环，请将rewind: true添加到carousel对象中。

我也有同样的问题。我通过改变以下脚本

的位置来修复它
$(document).ready(function() {
  var owl = $('#banner');  
  owl.owlCarousel({
    items: 1,
    loop: true,
  }); 
});

最初这个脚本是在主猫头鹰旋转木马div (.owl-carousel和.owl-theme类的外部div)的内部。

现在我把它移到div的外面。目前它在上面提到的div之后执行。

通过inspect element检查空项。可能它包含意想不到的HTML。在我的例子中，它是来自页面某处的其他元素，该结束标记缺少匹配的开始标记。

带有.owl-carousel类的元素只能是carousel项的父元素。将其他元素(除了carousel项)移出.owl-carousel .

相关文章：