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

Question

我对 Owl Carousel 有疑问。我想要一个单张幻灯片的 Owl Carousel ，但我的所有图像都显示为一张幻灯片，彼此垂直对齐，而不是随着 slider 方向的移动而水平对齐。 下面我将向您提供代码和屏幕截图:

<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

你可以试试这个:[For version 1.3.3 with jQuery 1.9.1]

在第 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 使其动态化