web-dev-qa-db-ja.com

スリック-ホバーで一時停止を使用する方法は？

AngularJSアプリに取り組んでいます。Slickを使用して、画像を表示するカルーセルを作成したいと考えています。

簡略化すると、私のHTMLは次のようになります。

<slick pauseOnHover="false"  autoplay="true" autoplaySpeed="1000" dots="true" touch-move="false" slides-to-show="3" speed="400" slides-to-scroll="1" ng-if="main.CarouselReady" infinite="true" class="slickCarousel">
    <div ng-repeat="img in main.myImages">
        <img src="{{img.src}}" />
    </div>
</slick>

滑らかなカルーセルを一時停止/再開するためのcontroller.jsの機能にリンクされたボタンがあります。これは正常に機能しています。

問題は、マウスが画像セクションの上にある（ホバーしている）ときにカルーセルが自動再生されないことです。 「pauseOnHover」の設定がfalseに設定されているため、マウスを入れたときに自動再生されない理由がわかりません...

javascripthtmlangularjsslick
5
Sonny Jayet

属性表記を使用する場合は、pauseOnHoverをpause-on-hoverと記述する必要があります。

<slick pause-on-hover="false" ...>
    ...
</slick>
6
Mistalis

ユーザーpauseOnHover:false slickconfigで

例えば：

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true,
  pauseOnHover:false
});
10
Arun Kasyakar