7

我想知道是否有人可以提供帮助。我在 CMS 中使用轮播，并且希望客户能够在他们愿意的情况下有时只有 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>
4

7 回答 7

17

对于新的测试版，见下文

猫头鹰旋转木马 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();
            }
         }
    });
});

猫头鹰旋转木马 2 测试版

在这个新改版的插件版本中，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');
            }
        }
    });
});
于 2013-11-17T14:16:33.597 回答
2

您可以检查轮播中是否有 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

   });
});
于 2017-01-20T13:39:11.083 回答
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;
}
于 2014-08-13T13:03:52.293 回答
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 carousel 版本。

于 2016-11-10T17:32:03.277 回答
0

我注意到 Owl Carousel 的问题，只有一个项目是如果您希望轮播被循环，该项目不会显示。

以下是您应该在轮播启动之前放置的一些代码，我还添加了导航选项的显示和隐藏 - 因为您不想显示一张“未循环”幻灯片的导航元素：

// 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
        }
    }
});
于 2016-02-05T10:17:20.473 回答
0 
function headerSlider(owlElementID){
    var autoPlay = 5000;
    if (!$(owlElementID).length){
        return false;
    }
    if ($(owlElementID).children().length <2) {
        autoPlay = false;
    }
    $(owlElementID).owlCarousel({
        autoPlay: autoPlay
于 2015-09-29T09:16:54.043 回答
-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

  });

});
于 2015-10-27T06:08:32.147 回答