当旋转木马只有1张幻灯片时，猫头鹰旋转木马仍会过渡
我想知道是否有人能帮忙解决这个问题。 我在CMS中使用旋转木马，并希望客户有时只有1张幻灯片，如果他们愿意的话。 但是，如果只有1张幻灯片，则仍会出现淡入淡出过渡，因此它基本上会过渡到自身。 当只有一张幻灯片时，有没有办法阻止旋转木马过渡？ 令我感到惊讶的是，这不是一个内置function，因为它与我使用过的其他旋转木马一样。
#owl-demo .item img{ display: block; width: 100%; height: auto; } $(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 }); }); 对于新的测试版，请参见下文
猫头鹰旋转木马1.3.2
在这个版本中，插件似乎没有这个设置。 您可以在插件初始化之前或之后自行完成此操作。
选项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(); } } }); });
Owl Carousel 2 Beta
在这个新版本的插件中，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个项目并激活“自动播放”。 在你的情况下，它将如下所示。
$(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 }); });
这是因为我已经使用导出设置了东西：
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; }
function headerSlider(owlElementID){ var autoPlay = 5000; if (!$(owlElementID).length){ return false; } if ($(owlElementID).children().length <2) { autoPlay = false; } $(owlElementID).owlCarousel({ autoPlay: autoPlay
我注意到Owl Carousel的问题只有一个项目是如果你想让旋转木马循环，该项目不显示。
下面是你应该在启动轮播之前放置的一些代码，我还添加了一个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 } } });
在banner.tlp的脚本部分插入if / else语句，如下所示：
它适用于Opencart 2.2.0中包含的owl轮播版本。
$(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 }); });