Javascript Owl-carousel：每张幻灯片只显示一张图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30494565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl-carousel: Displaying only one image per slide
提问by Richard Hamilton
Today I discovered owl-carouseland I have been trying to get it to work.
今天我发现owl-carousel并且我一直在努力让它发挥作用。
I'm trying to make a carousel that cycles through images of dinosaurs. The problem is that 4 dinosaurs show up on the same slide(2 in the fiddle half-sized window). I wanted only 1 to show up per slide.
我正在尝试制作一个循环播放恐龙图像的旋转木马。问题是 4 只恐龙出现在同一张幻灯片上（小提琴半尺寸窗口中出现 2 只）。我希望每张幻灯片只显示 1 个。
I have a fiddle
我有一个小提琴
http://jsfiddle.net/8bJUc/318/
http://jsfiddle.net/8bJUc/318/
JavaScript
JavaScript
<script>
$(document).ready(function(){
$("#dino-example").owlCarousel({
items: 5
});
});
</script>
HTML
HTML
<div id="dino-example" class="dino-carousel">
<div class="item">
<img src="http://johntomsett.files.wordpress.com/2014/03/14525_1_v12_tp.jpg" alt="dinosaur1"></img>
</div>
<div class="item">
<img src="http://images.clipartpanda.com/t-rex-dinosaur-clip-art-T-Rex-Dinosaur_1.png" alt="dinosaur2"></img>
</div>
<div class="item">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQbuwkU3kDpr4rByYQ3ydbTPv6zP1L0yhrKB00fa5YhkY0i9WKFWA" alt="dinosaur3"></img>
</div>
<div class="item">
<img src="http://content.animalnewyork.com/wp-content/uploads/new-dinosaur-nasutoceratops.jpg" alt="dinosaur4"></img>
</div>
</div>
CSS
CSS
img {
height: 300px;
width: 300px;
}
I tried changing itemsto 1, but that didn't solve it either.
我尝试更改items为 1，但这也没有解决。
Does anyone know how to solve this?
有谁知道如何解决这个问题？
Help is appreciated.
帮助表示赞赏。
回答by Josh Stevens
singleItemproperty needs to be true
singleItem财产必须是真的
$(document).ready(function() {
$("#dino-example").owlCarousel({
items: 5,
singleItem: true
});
});
回答by Ctpelnar1988
To make the carousel "slide":
要使轮播“滑动”：
$(document).ready(function() {
$("#dino-example").owlCarousel({
singleItem: true,
autoPlay: 3000
});
});
