web-dev-qa-db-ja.com

フクロウカルーセルが自動再生されない

私は自分のサイトでフクロウカルーセルを使用しています。彼らのドキュメントによると、このJavaScriptの一部は機能するはずです。

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)}
</script>

ただし、何らかの理由で自動再生されません。スライダーのHTMLは次のとおりです。

<div id="intro" class="owl-carousel">
    <div class="item first">
      <div class="container">
        <div class="row">
          <div class="carousel-caption-left colour-white">
            <h2>Title Text</h2>
            <h1>Sub title text here.</h1>
            <p>If you like you can even add a sentence or two here.</p>
          </div>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item second">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item third">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
</div>
javascripthtmlowl-carousel
24
thedoggydog

はい、入力エラーです。

書く

自動再生

じゃない

自動再生

Autoplay-pluginコードは、変数を「autoPlay」として定義します。

70
Matthias from Berlin

間違ったフクロウのドキュメントバージョンを使用している可能性があります。

autoPlay is for 1st version

autoplay is for 2nd version
31
1ronmat

自動再生を自動再生のみに変更しても機能しませんでした。このトリックは、autoplaySpeedプロパティとautoplayTimeoutプロパティを追加し、次のように同じ値に設定することでした。

$(document).ready(function(){
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        items: 1,
        autoplay: true,
        autoPlaySpeed: 5000,
        autoPlayTimeout: 5000
        autoplayHoverPause: true
    });
});

これが実際のデモです： JS Bin

これに関する詳細情報は、ここにあります： https://github.com/smashingboxes/OwlCarousel2/issues/234

13
Veegish Ramdani

これを追加

owl.trigger('owl.play',6000);
6
M Arfan

autoplayとautoplayTimeoutの両方のプロパティを設定する必要があります。私はこのコードを使用しましたが、それは私のために機能します：

$('.owl-carousel').owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                navigation: false,
                margin: 10,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 2
                    }
                }
            })
5
Hossein Hashemi

このコードはあなたのために働くはずです

$("#intro").owlCarousel ({

        slideSpeed : 800,
        autoPlay: 6000,
        items : 1,
        stopOnHover : true,
        itemsDesktop : [1199,1],
        itemsDesktopSmall : [979,1],
        itemsTablet :   [768,1],
      });
4
frank john

私の場合、autoPlayは機能していませんが、autoplayは正常に機能しています

私はこれだけを使用しました

<script src="plugins/owlcarousel/owl.carousel.js"></script>

owl.autoplay.jsは必要ありません＆私のフクロウカルーセルバージョンは@ version 2.0.0

このことがあなたを助けることを願っています:)

2
Zaheer Ahmad

バージョン2.3.4では、owl.autoplay.jsプラグインを追加する必要があります。次に、以下を実行します

var owl = $('.owl-carousel');
owl.owlCarousel({
   items:1, //how many items you want to display
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true
});
1
israel

あなたのJavascriptは

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: true
)}
</script>
1
XIMRX

V1.3.3を使用している場合は、次のプロパティを使用します

autoPlay : 5000

または、最新バージョンを使用して、次のプロパティを使用します

autoPlay : true
1
Ahmed Awan

設定autoPlay: trueがうまくいきませんでした。ただし、autoPlay: 5000 動いた。

1
aryalprakash

入力ミスだけで、

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)} ----- TYPO
</script>

そのはず-

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
}) ----- Correct
</script>
1
Neil

  1. 最初に、owl.autoplay.jsを呼び出す必要があります。

  2. このコードは私のために動作します：owl.trigger（ 'play.owl.autoplay'、[1000]）;

0
Kako Sabolo

私は同じ問題を抱えていて、解決策を見つけることができませんでした。最終的に私は、フクロウセルver。 2.3.4 owl.carousel.jsだけでなく、owl.autoplay.jsファイルも含める必要があります。

0
Ondrej