LoginSignup
0
0

More than 3 years have passed since last update.

OwlCarousel2でスムーススライドショー

Posted at

OwlCarousel2 2.3.4 (https://owlcarousel2.github.io/OwlCarousel2/)
を使った複数枚のスライドショーで、
デフォルトでは、1枚ずつ、画像端に来ると一時停止するようになっており、
要件では、一時停止せず、リニアに動かしたい要望があった。

リニアで調べると、オプションのslideTransitionにLinearを指定すると良いらしい。

slideTransition: 'linear',

しかし、うまく行かない。

さらに調べると、下記にあたった。
https://codepen.io/osingh/pen/wOqrPX
実装済みのようで、ちゃんと思った通りの動きをしていた。
しかし、実際おなじオプションを当ててみると、
うごきがおかしい。

さらに調べた際、
スムーズ ということばがおもいついたので、
それを調べると、Github内のページにあたった。
https://github.com/OwlCarousel2/OwlCarousel2/issues/296

読み進めると、一番最後に、一番知りたい内容が書かれていた。
https://github.com/OwlCarousel2/OwlCarousel2/issues/296#issuecomment-400703465

つまり、

autoplay : true,
slideTransition: 'linear',
autoplayTimeout : 4000,
autoplaySpeed : 400

autoplayTimeoutとautoplaySpeedを同値、
もしくは、autoplaySpeedの方を大きくするとのこと。
これにより、やりたいことが無事に実装できた。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0