Owl Carousel 幻灯片全部显示为一张幻灯片

Question

我对猫头鹰旋转木马有疑问。我想要一个单张幻灯片的猫头鹰轮播，但我所有的图像都显示为一张幻灯片，它们彼此垂直对齐，而不是随着滑块方向的移动而水平排列。 下面我会为你提供代码和截图：

<div id="owl-demo" class="projects-slider owl-carousel owl-theme">

    <div class="item"><img src="img/lisi1.jpg" alt="lisi"></div>
    <div class="item"><img src="img/lisi2.jpg" alt="lisi"></div>
    <div class="item"><img src="img/lisi3.jpg" alt="lisi"></div>
    <div class="item"><img src="img/lisi3.jpg" alt="lisi"></div>



    </div>

CSS

.owl-carousel .item img {
    display:block;
    width:100%;
    height:auto;



}

.owl-carousel .item {
    margin:0px;

}

JS

$(document).ready(function() {

  $('.projects-slider').owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true,
      pagination: true,
      items: 1,


  });

});

Answer 1

你可以试试这个：[对于带有 jQ​​uery 1.9.1 的 1.3.3 版]

在第 754 行更改 owl.carousel.js

doTranslate : function (pixels) { 
        var tmp_pixi = 0;
        tmp_pixi = (pixels % 1553);
        return {
            "-webkit-transform": "translate3d(0px, " + tmp_pixi + "px, 0px)",
            "-moz-transform": "translate3d(0px, " + tmp_pixi + "px, 0px)",
            "-o-transform": "translate3d(0px, " + tmp_pixi + "px, 0px)",
            "-ms-transform": "translate3d(0px, " + tmp_pixi + "px, 0px)",
            "transform": "translate3d(0px, " + tmp_pixi + "px,0px)"
            };           
    },

注意： 350 将是图像的高度...您可以将其设置为静态方式，或者使用 jquery 获取它以使其成为动态

Answer 2

您正在使用太旧的 Owl Carousel 和太新的 jQuery。

尝试使用 2.x 版本的 jQuery。