猫头鹰轮播中只有1张幻灯片时仍会转换 [英] Owl carousel still transitions when only 1 slide in carousel

问题描述

我想知道是否有人可以提供帮助.我在CMS中使用轮播，希望客户有时可以只拥有一张幻灯片.但是，如果只有1张幻灯片，则仍然会发生淡入淡出过渡，因此基本上可以过渡到其自身.只有1张幻灯片时，有什么方法可以阻止轮播的过渡吗?令我惊讶的是，它不是我使用过的其他轮播工具的内置函数.

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.

<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>

推荐答案

有关新的Beta版本，请参见下文

在 this 版本中，插件似乎没有为此设置.您可以在初始化插件之前或之后自行完成此操作.

In this version, 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.

选项1-插件初始化之前

最好的方法是让您在完全初始化插件之前检测到这种情况.

The best approach would be for you to detect this situation before initializing the plugin altogether.

例如:

$(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方法来完成此操作.

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 afterInit callback and the stop method.

例如:

$(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已被完全替换.仍然可以使用相同的方法，但是实现方式略有不同.

---

Owl Carousel 2 Beta

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.

选项1-插件初始化之前

新的API现在包括一个名为autoplay的选项，该选项一旦初始化就可以直接控制轮播的行为.默认情况下，此选项设置为false，但我们可以根据幻灯片的数量随意设置.

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.

例如:

$(document).ready( function () {
    $owlContainer = $('#owl-demo');
    $owlSlides    = $owlContainer.children('div');
    owlAutoPlay   = $owlSlide.length > 1;   

    $('#owl-demo').owlCarousel({
        // other options go here
        //...,
        autoplay: owlAutoPlay
    }
});

或者，根据幻灯片的数量，我们也可以选择不完全初始化插件，就像在先前版本中一样(请参见上面的选项1 ).

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 1 above).

选项2-插件初始化后

与以前的版本一样，如果必须初始化插件(并且必须将autoplay选项设置为true)，则还可以在初始化后停止轮播.但是，在此版本中，初始化回调选项现在被命名为onInitialized.此外，没有直接的.stop()方法，相反，您将需要触发轮播的autoplay.stop.owl事件.

As in the previous version, if you must initialize the plugin (and if you must have the autoplay option 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.owl event of the carousel.

例如:

$(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张幻灯片时仍会转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！