Jquery 猫头鹰旋转木马只有1个滑入旋转木马时仍会转换

我想知道是否有人能帮上忙。我在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>

#猫头鹰演示{
显示：块；
宽度：100%；
高度：自动；
}
$（文档）.ready（函数（）{
$（“#猫头鹰演示”）.owlCarousel({
导航：错误，
stopOnHover:true，
分页速度：1000，
自动播放：5000，
goToFirstSpeed:2000，
自动高度：正确，
过渡风格：“褪色”，
singleItem：true
//“singleItem:true”是以下各项的快捷方式：
//项目：1，
//itemsDesktop:false，
//itemsDesktopSmall:错误，
//itemsTablet:false，
//itemsMobile:错误
});
});

有关新的测试版，请参见下文

---

猫头鹰转盘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 {
        //...
    }
});

$(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();
            }
         }
    });
});

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

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

$(document).ready( function () {
    $('#owl-demo').owlCarousel({
        // Other options go here
        // ...,
        onInitialized: function() {
            if ($('#owl-demo').children().length == 1) {
                 $('#owl-demo').trigger('autoplay.stop.owl');
            }
        }
    });
});

选项2-插件初始化后

在这种情况下，您可能依赖插件来设计和动态调整项目。在这种情况下，您可以在初始化后检测到只有一张幻灯片，然后停止转换。您可以使用

afterInit

回调和

stop

方法执行此操作

例如：

$(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 {
        //...
    }
});

$(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();
            }
         }
    });
});

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

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

$(document).ready( function () {
    $('#owl-demo').owlCarousel({
        // Other options go here
        // ...,
        onInitialized: function() {
            if ($('#owl-demo').children().length == 1) {
                 $('#owl-demo').trigger('autoplay.stop.owl');
            }
        }
    });
});

---

猫头鹰旋转木马2测试版 在这个新版本的插件中，API被完全替换了。同样的方法仍然是可能的，但实现略有不同

选项1-插件初始化之前

新的API现在包括一个名为

autoplay

的选项，该选项允许在转盘初始化后直接控制转盘的行为。默认情况下，此选项设置为

false

，但我们可以根据幻灯片数量随意设置

例如：

$(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 {
        //...
    }
});

$(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();
            }
         }
    });
});

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

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

$(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）

选项2-插件初始化后

与上一版本一样，如果必须初始化插件（并且必须将

自动播放

选项设置为

true）

，也可以在初始化后停止旋转木马。但是，在此版本中，初始化回调选项现在命名为

onInitialized

。此外，没有直接的

.stop（）

方法。相反，您需要触发转盘的

autoplay.stop.owl

事件

例如：

$(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 {
        //...
    }
});

$(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();
            }
         }
    });
});

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

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

$(document).ready( function () {
    $('#owl-demo').owlCarousel({
        // Other options go here
        // ...,
        onInitialized: function() {
            if ($('#owl-demo').children().length == 1) {
                 $('#owl-demo').trigger('autoplay.stop.owl');
            }
        }
    });
});

---

这样做是因为我已经在使用导出来设置内容：

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

exports.setup=函数（$elems，options）{
if（！！！$elems.length）{返回false；}
options=$.extend（{}，defaultOptions，options）；
如果（！！options.lazyLoad）{
//看http://owlgraphic.com/owlcarousel/demos/lazyLoad.html
$elems.find（'img'）。每个（函数（）{
$（this.addClass（'owl-lazy'）.data（'src'，$（this.attr（'src'））；
});
}
//禁用“仅限一条横幅”转盘的自动播放：
if（$elems.find（'img'）。长度
函数头滑动器（owlementId）{
var自动播放=5000；
if（！$（owlementId）.length）{
返回false；
}
if（$（owlementId）.childrence（）.length我注意到Owl转盘的问题，只有一个项目是，如果希望转盘循环，该项目不会显示

下面是启动旋转木马之前应该输入的一些代码，我还添加了显示和隐藏导航选项-因为您不想为一张“未打开”的幻灯片显示导航元素：

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


var onOff=“”；
如果（onOff！=“1”）{
onOff=5000；
}否则{
onOff=false；
}

它与Opencart 2.2.0中包含的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

   });
});

我可以做：$（“#owl demo”）.stop（）；但是幻灯片继续滑动只是为了确保-您已经将
#owl demo
更改为您自己的相关选择器，对吗？@davidkarsson您是否有可能使用新的beta版，owl Carousel 2？如果是这样，这似乎是一个经过改进的插件，具有非常不同的API，没有
.stop（）
方法。我将更新答案以包括此版本。@davidkarsson更新答案以包括新的beta版本。@scotta7exander这显然取决于您的特定标记。如果项目不是主容器的直接后代，则需要使用
find
方法。