web-dev-qa-db-ja.com

フクロウのカルーセルは、カルーセル内でスライドが1つしかない場合でも遷移します

誰かがこれを手伝ってくれるのだろうか。私はCMSでカルーセルを使用していますが、必要に応じて、お客様がスライドを1つだけ持つことができるようにしたいと考えています。ただし、スライドが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>
jquerycarouseltransitionsowl-carousel
7
user3001694

新しいベータ版については以下を参照してください

フクロウカルーセル1.3.2

thisバージョンでは、プラグインにこの設定がないようです。プラグインが初期化される前または後に、これを自分で行うことができます。

オプション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-プラグインの初期化後

アイテムのスタイル設定と動的調整もプラグインに依存している場合があります。この状況では、初期化後にスライドが1つしかないことを検出して、遷移を停止できます。これは、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');
            }
        }
    });
});
_
16
Boaz

カルーセルにアイテムが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

   });
});
1
Baris

フクロウカルーセルと1つのアイテムの問題は、カルーセルをループさせたい場合にアイテムが表示されないことです。

以下は、カルーセルが開始される前に配置する必要のあるコードです。1つの「ループされていない」スライドのナビゲーション要素を表示したくないため、navオプションの表示と非表示も追加しました。

// 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
        }
    }
});
0
Alex
function headerSlider(owlElementID){
    var autoPlay = 5000;
    if (!$(owlElementID).length){
        return false;
    }
    if ($(owlElementID).children().length <2) {
        autoPlay = false;
    }
    $(owlElementID).owlCarousel({
        autoPlay: autoPlay
0
ollio

私はすでにエクスポートを使用して設定しているので、代わりにこれを行いました：

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;
}
0
David Karlsson

次のように、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>

Opencart2.2.0に含まれているバージョンのフクロウカルーセルでうまく機能します。

0
Keyser Söze