jQuery 当旋转木马中只有 1 张幻灯片时，猫头鹰旋转木马仍会转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20031525/
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 still transitions when only 1 slide in carousel
提问by user3001694
I wonder if anyone could help with this. I am using carousel in a CMS and would like the ability for the customer to sometimes only have 1 slide if they so wish. However if only 1 slide is there the fade transition still occurs so it basically transitions to itself. Is there any way to stop the carousel transitioning when there is only 1 slide? I am surprised that this is not a built in function as it has been with other carousels I have used.
我想知道是否有人可以帮助解决这个问题。我在 CMS 中使用轮播，并且希望客户能够在他们愿意的情况下有时只有 1 张幻灯片。然而，如果只有 1 张幻灯片，淡入淡出过渡仍然发生，所以它基本上过渡到自己。当只有 1 张幻灯片时，有没有办法阻止轮播过渡？我很惊讶这不是内置功能，因为它与我使用过的其他旋转木马一样。
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h2><umbraco:Item field="bigMessage" stripParagraph="true" convertLineBreaks="true" runat="server" /></h2>
<p><umbraco:Item field="messageSubtext" stripParagraph="true" convertLineBreaks="true" runat="server" /></p>
<umbraco:image runat="server" field="bannerImage" />
</div>
</div>
<script src="/owl-carousel/owl.carousel.js"></script>
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation: false,
stopOnHover: true,
paginationSpeed: 1000,
autoPlay: 5000,
goToFirstSpeed: 2000,
autoHeight : true,
transitionStyle:"fade",
singleItem: true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
</script>
回答by Boaz - Reinstate Monica
For the new beta version see below
对于新的测试版，请参见下文
Owl Carousel 1.3.2
猫头鹰旋转木马 1.3.2
In thisversion, it doesn't seem that the plugin has a setting for this. You can do this on your own, either before or after the plugin has been initialized.
在这个版本中，插件似乎没有这个设置。您可以在插件初始化之前或之后自行执行此操作。
Option 1 - before plugin initialization
选项 1 - 在插件初始化之前
The best approach would be for you to detect this situation before initializing the plugin altogether.
最好的方法是在完全初始化插件之前检测这种情况。
For example:
例如：
$(document).ready( function () {
$owlContainer = $('#owl-demo');
$owlSlides = $owlContainer.children('div');
// More than one slide - initialize the carousel
if ($owlSlides.length > 1) {
$owlContainer.owlCarousel({
// options go here
});
// Only one slide - do something else
} else {
//...
}
});
Option 2 - after plugin initialization
选项 2 - 插件初始化后
It might be the case that you're relying on the plugin to also style and dynamically adjust the item. In this situation, you can detect there's only one slide after initialization and then stop the transitions. You can do this with the afterInitcallback and the stopmethod.
在这种情况下，您可能还依赖插件来设计和动态调整项目。在这种情况下，您可以在初始化后检测到只有一张幻灯片，然后停止过渡。您可以使用afterInit回调和stop方法来做到这一点。
For example:
例如：
$(document).ready( function () {
$('#owl-demo').owlCarousel({
// other options go here
//...,
afterInit: function() {
$owlContainer = $('#owl-demo');
$owlSlides = $owlContainer.children('div');
// Only one slide - stop the carousel
if ($owlSlides.length == 1) {
$owlContainer.stop();
}
}
});
});
Owl Carousel 2 Beta
猫头鹰旋转木马 2 测试版
In this new revamped version of the plugin, the API has been completely replaced. The same approaches are still possible, but the implementation is a little different.
在这个插件的新改进版本中，API 已被完全替换。相同的方法仍然可行，但实现方式略有不同。
Option 1 - before plugin initialization
选项 1 - 在插件初始化之前
The new API now includes an option named autoplay, which allows to directly control the carousel's behavior once it's initialized. By default this option is set to false, but we can set it as we please according to the number of slides.
新 API 现在包含一个名为 的选项autoplay，它允许在初始化后直接控制轮播的行为。默认情况下，此选项设置为false，但我们可以根据幻灯片的数量随意设置。
For example:
例如：
$(document).ready( function () {
$owlContainer = $('#owl-demo');
$owlSlides = $owlContainer.children('div');
owlAutoPlay = $owlSlide.length > 1;
$('#owl-demo').owlCarousel({
// other options go here
//...,
autoplay: owlAutoPlay
}
});
Alternatively, according to the number of slides, we can also choose to not initialize the plugin altogether, as we did in the previous version (see option 1above).
或者，根据幻灯片的数量，我们也可以选择不完全初始化插件，就像我们在以前的版本中所做的那样（参见上面的选项 1）。
Option 2 - after plugin initialization
选项 2 - 插件初始化后
As in the previous version, if you must initialize the plugin (and if you must have the autoplayoption set to true), you can also stop the carousel after initialization. However, in this version the initialization callback option is now named onInitialized. Also, there's no direct .stop()method. Instead you will need to trigger the autoplay.stop.owlevent of the carousel.
和之前的版本一样，如果你必须初始化插件（如果你必须将autoplay选项设置为true)，你也可以在初始化后停止轮播。但是，在这个版本中，初始化回调选项现在被命名为onInitialized。此外，没有直接.stop()方法。相反，您需要触发autoplay.stop.owl轮播事件。
For example:
例如：
$(document).ready( function () {
$('#owl-demo').owlCarousel({
// Other options go here
// ...,
onInitialized: function() {
if ($('#owl-demo').children().length == 1) {
$('#owl-demo').trigger('autoplay.stop.owl');
}
}
});
});
回答by Baris
You can check if there is 1 item in your carousel and activate 'autoplay' or not. In your case it will be like below.
您可以检查轮播中是否有 1 个项目并激活“自动播放”。在您的情况下，它将如下所示。
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: false,
stopOnHover: true,
paginationSpeed: 1000,
goToFirstSpeed: 2000,
autoHeight : true,
transitionStyle:"fade",
singleItem: true
autoPlay: $("#owl-demo > div").length > 1 ? 5000 : false
});
});
回答by Alex
I noticed that the problem with Owl Carousel and only one item is that the item doesn't show if you want the carousel to be looped.
我注意到 Owl Carousel 的问题并且只有一项是如果您希望轮播循环，则该项目不会显示。
Below is some code you should put before the carousel is initiated, I've added a show and hide of the nav option as well - because you don't want to show navigation elements for one "unlooped" slide:
以下是您应该在启动轮播之前放置的一些代码，我还添加了导航选项的显示和隐藏 - 因为您不想为一张“未循环”的幻灯片显示导航元素：
// Calculate number of Slides
var totalItems = $('.item').length;
// If there is only one slide
if (totalItems == 1) {
// Set loop option variable to false
var isLooped = false;
// Set nav option variable to false
var isNav = false;
} else {
// Set loop option variable to true
var isLooped = true;
// Set loop option variable to true
var isNav = true;
}
// Initiate Carousel
$('.hpSlider').owlCarousel({
//add in your dynamic variables to your options
loop: isLooped,
nav:isNav,
// then any other options...
margin:0,
video:true,
mouseDrag:false,
autoplay:true,
autoplayTimeout:3500,
autoplayHoverPause:true,
navSpeed:1300,
autoplaySpeed:1300,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
回答by Keyser S?ze
Insert an if/else statement in the script part of banner.tlp like this:
在 banner.tlp 的脚本部分插入一条 if/else 语句，如下所示：
<script type="text/javascript">
var onOff = "<?php echo sizeof($banners); ?>";
if(onOff !== "1") {
onOff = 5000;
} else {
onOff = false;
}
<!--
$('#banner<?php echo $module; ?>').owlCarousel({
items: 6,
autoPlay: onOff,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true,
transitionStyle: 'fade'
});
-->
</script>
It works well with the version of owl carousel that is included in Opencart 2.2.0.
它适用于 Opencart 2.2.0 中包含的 owl carousel 版本。
回答by David Karlsson
Did this instead since I am already using exports for setting stuff up:
这样做是因为我已经在使用导出来设置内容：
exports.setup = function ($elems, options) {
if (!!!$elems.length) {return false;}
options = $.extend({}, defaultOptions, options);
if (!!options.lazyLoad) {
// See http://owlgraphic.com/owlcarousel/demos/lazyLoad.html
$elems.find('img').each(function() {
$(this).addClass('owl-lazy').data('src', $(this).attr('src'));
});
}
//Disable autoplay for "one banner only" carousels:
if($elems.find('img').length<2){
options.autoplay=false;
}
$elems.owlCarousel(options);
return $elems;
};
head.ready(function() {
onload_window();
});
return exports;
}
回答by ollio
function headerSlider(owlElementID){
var autoPlay = 5000;
if (!$(owlElementID).length){
return false;
}
if ($(owlElementID).children().length <2) {
autoPlay = false;
}
$(owlElementID).owlCarousel({
autoPlay: autoPlay
回答by narsi
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
