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

你可以试试这个：[对于带有jQuery 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

你使用的猫头鹰轮播太旧了，jQuery太新了。

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

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

2 个答案: