当旋转木马只有1张幻灯片时,猫头鹰旋转木马仍会过渡

Question

我想知道是否有人能帮忙解决这个问题.我在CMS中使用旋转木马,并希望客户有时只有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>

Answer 1

对于新的测试版,请参阅下文

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