猫头鹰旋转木马幻灯片似乎全部作为一张幻灯片

我有一个猫头鹰旋转木马的问题。我想拥有一张幻灯片猫头鹰旋转木马，但是我的所有图像都显示为一张垂直对齐的幻灯片，而不是像滑块方向一样水平对齐。下面我将提供U带代码和截图：猫头鹰旋转木马幻灯片似乎全部作为一张幻灯片

<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; 

}

$(document).ready(function() { 

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

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


    }); 

});

来源

2016-08-14 Ilir Bajrami

@Tasos我已经设置singleItem为true，如果你看到上面2行。即使我删除了物品，它也没有工作：1 –

它没有运行，因为你最后昏迷 - 取出（物品：1）和最后一次昏迷（分页：真，），所以它只是（分页：真） - 你不需要（项目：1），如果你有（singleItem：true） - http://owlgraphic.com/owlcarousel/demos/one.html – Tasos

@Tasos不，即使没有昏迷 –

你可以试试这个：用jQuery对于版本1.3.3 1.9.1]

变化线owl.carousel.js 754

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将其设置为动态

来源

2016-08-14 21:54:34 Arif

不幸的是，这并不工作没有继承人的截图：[链接]（http://i864.photobucket.com/albums/ab210/batterylove/Screen%20Shot%202016-08-14 ％20at％2023.56.55.png） –

看到它在这里工作：https：// jsfiddle。 net/arifahmedjoy/hL4m1p4L/ – Arif

@IirBajrami：显示您的index.html文件的头部分，其中加载了所有脚本和css。 – Arif

您正在使用一个太旧的jQuery太旧的猫头鹰传送带。

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

来源

2016-08-15 07:33:55

是的男人。我刚刚意识到这个猫头鹰旋转木马有两个下载源。我不知道为什么有两个猫头鹰网站。一个是如此古老，一个充满了贝塔和许多问题。我只是用最新的猫头鹰“owl.carousel.2.0.0-beta.2.4”解决了这个问题，但我不得不添加一堆CSS来实现我想要做的导航点。简直太沮丧了。反正我明白这只猫头鹰是如何工作的，现在我知道该期待什么。感谢对我的问题家伙表现出兴趣。 –

继承人链接到完整的插件与更新的导航点的CSS： https://www.dropbox.com/s/dpn7436wd6fh1l9/owl.carousel.2.0.0-beta.2.4%20%28Dots%20styling% 20fixed％29.zip？DL = 0 –

猫头鹰旋转木马幻灯片似乎全部作为一张幻灯片

回答

相关问题