7

誰かがこれを手伝ってくれるのだろうか。私は 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>
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 - プラグインの初期化後

アイテムのスタイル設定と動的な調整もプラグインに依存している場合があります。この状況では、初期化後にスライドが 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 - プラグインの初期化前

autoplay新しい API には、初期化後のカルーセルの動作を直接制御できるという名前のオプションが含まれるようになりました。このオプションはデフォルトで に設定されて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 に答える
0

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

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

// 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 に答える
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 に含まれているフクロウ カルーセルのバージョンとうまく動作します。

于 2016-11-10T17:32:03.277 に答える
-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 に答える