みなさん、お疲れ様です。

今回は同じ方向にスライドし続けることができるカルーセルを作成したので、ご紹介します。

2017年1月8日更新
コードを直して挙動がだいぶましになったものをあげましたので、こちらからどうぞ
同じ方向にスライドし続けられるカルーセル第2弾

5秒ごとに要素が切り替わっていきます。左右のボタンでも切り替えられます。スライドで切り替わるものは以前にも作ったのですが、今回はずっと同じ方向にスライドするようにしました。

DEMO①

HTML

CSS

jQuery

liをposition:absoluteにして、動かしています。一回のスライドごとに左からの位置を取得し、それにli要素一つ分の幅を足したり、引いたりすることでスライドさせています。li要素の幅と高さでwrapperの大きさやボタンの位置を制御しているので、CSSはそこだけ変えれば好きな大きさで使うことができます。フリックもつけています。仕組みは以前のものと同じです。

○今回使ったjQueryのいろいろ
・.stop()：jQueryのアニメーションの処理を制御します。今回は時間で動くタイミングとボタンを押すタイミングが被ったときにきちんと処理できるように引数を(true,true)にしています。
詳しくはこちらをご覧ください。
【jQuery】stopメソッドを理解する

・.offset().left：要素がページの左から何pxの位置かを取得します。

見たいところに飛べるボタンもつけたかったのですが、実装できませんでした。いつか挑戦したいと思います。あと、早く動かすと処理が追いつかないのも何とかしたいと思います。

それでは！