我想知道是否有人可以帮忙解决这个问题。我在CMS中使用旋转木马，并希望客户有时只有1张幻灯片，如果他们愿意的话。但是，如果只有1张幻灯片，则仍会出现淡入淡出过渡，因此它基本上会过渡到自身。当只有一张幻灯片时，有没有办法阻止旋转木马过渡？令我感到惊讶的是，这不是我用过的其他旋转木马的内置功能。</ p>
<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>
答案 0 :(得分：16)
有关新的测试版，请参阅下文
在此版本中，该插件似乎没有此设置。您可以在插件初始化之前或之后自行完成此操作。
选项1 - 在插件初始化之前
最好的方法是在完全初始化插件之前检测这种情况。
例如：
$(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 {
//...
}
});
选项2 - 插件初始化后
可能是您依赖插件来设置样式并动态调整项目。在这种情况下，您可以在初始化后检测到只有一张幻灯片，然后停止转换。您可以使用afterInit回调和stop方法执行此操作。
例如：
$(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();
}
}
});
});
在这个新版本的插件中，API已被完全替换。仍然可以采用相同的方法，但实施方式略有不同。
选项1 - 在插件初始化之前
新API现在包含一个名为autoplay的选项，它允许在初始化后直接控制轮播的行为。默认情况下，此选项设置为false，但我们可以根据幻灯片的数量随意设置。
例如：
$(document).ready( function () {
$owlContainer = $('#owl-demo');
$owlSlides = $owlContainer.children('div');
owlAutoPlay = $owlSlide.length > 1;
$('#owl-demo').owlCarousel({
// other options go here
//...,
autoplay: owlAutoPlay
}
});
或者，根据幻灯片的数量，我们也可以选择不完全初始化插件，就像我们在之前版本中所做的那样（参见上面的选项1 ）。
选项2 - 插件初始化后
与上一版本一样，如果必须初始化插件（如果必须将autoplay选项设置为true)，则还可以在初始化后停止轮播。但是，在此版本中初始化回调选项现在名为onInitialized。此外，没有直接.stop()方法。相反，您需要触发轮播的autoplay.stop.owl事件。
例如：
$(document).ready( function () {
$('#owl-demo').owlCarousel({
// Other options go here
// ...,
onInitialized: function() {
if ($('#owl-demo').children().length == 1) {
$('#owl-demo').trigger('autoplay.stop.owl');
}
}
});
});
答案 1 :(得分：1)
您可以检查旋转木马中是否有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
});
});
答案 2 :(得分：0)
这是因为我已经使用导出设置了东西：
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;
}
答案 3 :(得分：0)
function headerSlider(owlElementID){
var autoPlay = 5000;
if (!$(owlElementID).length){
return false;
}
if ($(owlElementID).children().length <2) {
autoPlay = false;
}
$(owlElementID).owlCarousel({
autoPlay: autoPlay
答案 4 :(得分：0)
我注意到猫头鹰旋转木马的问题只有一个项目是如果您想要轮播旋转，则该项目不会显示。
下面是你应该在启动轮播之前放置的一些代码，我添加了一个show和hide的nav选项 - 因为你不想显示一个“unlooped”幻灯片的导航元素：
// 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
}
}
});
答案 5 :(得分：0)
在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>
适用于Opencart 2.2.0中包含的owl轮播版本。
答案 6 :(得分：-1)
$(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
});
});