Javascript owl carousel 2 不适用于循环和 1 个项目（现已修复错误）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32311300/
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 2 not work with loop and 1 items (Bug Fixed Now)
提问by Perspolis
I work with owl carousel 2 for carousel content.
我使用 owl carousel 2 来制作轮播内容。
JS:
JS：
$('#owl-demo').owlCarousel({
loop: true,
margin: 10,
nav: true,
items: 1,
});
HTML:
HTML：
<div id="owl-demo" class="owl-carousel">
<div class="item"><h4>1</h4></div>
</div>
Problem:
问题：
when I have one content (dynamic content using PHP) loop:trueand items:1not work and I see blank But if I add two content Owl worked true!!
当我有一个内容（使用 PHP 的动态内容）loop:true并且items:1不工作并且我看到空白但是如果我添加两个内容 Owl 工作真的！
EDIT: my content is dynamic ( 1 - ....). when my result is one content owl have a problem.
编辑：我的内容是动态的（1 - ....）。当我的结果是一个内容时，猫头鹰有问题。
Problem DEMO
问题演示
worked DEMO
工作演示
how do fix this problem ?
如何解决这个问题？
回答by Perspolis
回答by fluidbrush
I hope the below method will solve your problem.
You dont need to edit the owl carousel js.
The same method can be applied to Bx Slider also.
我希望下面的方法可以解决您的问题。
您不需要编辑 owl carousel js。同样的方法也适用于 Bx Slider。
$('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true: false,
loop:($(".owl-carousel .item").length > 1) ? true: false,
responsive: {
0: {
items: 1,
},
500: {
items: 1,
},
768: {
items: 1,
}
}
})
回答by Tohid Dadashnezhad
I used this method to solve the problem and I think it's pretty easy.
我用这个方法解决了这个问题，我认为这很容易。
var options={
margin: 10,
nav: true,
items: 1
};
if($('#owl-demo .owl-item').length>1){
options.loop=true;
}
$('#owl-demo').owlCarousel(options);
回答by CaldwellYSR
You could check the number of .item elements before you call your plugin like so:
您可以在调用插件之前检查 .item 元素的数量，如下所示：
// Be more specific with your selector if .items is used elsewhere on the page.
var items = $('.items');
if(items.length > 1) {
$('#owl-demo').owlCarousel({
loop: true,
...
});
} else {
// same as above but with loop: false;
}
回答by Ashish v
If you want to put only single image in owlCarousel as a banner image then you can add one argument in owl carousel js.
如果您只想将 owlCarousel 中的单个图像作为横幅图像，那么您可以在 owl carousel js 中添加一个参数。
singleItem: true
like this:
像这样：
<script type="text/javascript">
$(document).ready(function() {
$('#main_banner').owlCarousel({
margin: 0,
loop: true,
navText: [ "<img src='images/leftArrow.png'>", "<img src='images/rightArrow.png'>" ],
dots: false,
items :1,
autoplay: true,
singleItem: true
});
});
</script>
回答by Vivek B
$('#owl-demo').owlCarousel({
loop: true,
margin: 10,
nav: true,
items: 1,
responsive:{
0:{
items:1,
nav:true,
loop:true
},
600:{
items:1,
nav:false,
loop:true
},
1000:{
items:1,
nav:true,
loop:true
}
}
});
$('#owl-demo').owlCarousel({
loop: true,
margin: 10,
nav: true,
items: 1,
responsive:{
0:{
items:1,
nav:true,
loop:true
},
600:{
items:1,
nav:false,
loop:true
},
1000:{
items:1,
nav:true,
loop:true
}
}
});
