久しぶりの更新となりました。
年明けにデザインをリニューアルしました。すっきりと見やすくなることを目指したので、そう感じてもらえると嬉しいです。

さて、今回はカルーセルの実装です。

以前に同じ方向にスライドし続けられるカルーセルとして記事を書いたのですが、
その時のものは不完全で、途中で動きがおかしくなり、要素が消えるといった不具合がありましたので、
作り直したものです。

実は制作自体は半年以上前にできてたのですが、ブログに書き忘れてました。

以下デモとコードです。

DEMO

html

CSS

JS

htmlは前回とほぼ同じです。CSSは前回はpositionで配置していたのをfloatに変えています。
そして、JSでは、カルーセルを囲むulをクローンして、複製されたulになったら1個目の要素にもどるという動きをすることで、ずっとくるくるしているように見せています。
ページャーの自動生成やフリックについては前回もやったので解説は割愛します。

○今回使ったjQueryのいろいろ

・clone()・・・その名の通り、要素を複製する。appendToで複製した要素をもともとあった要素の後ろに追加しています。

参考にさせていただいたサイト：
jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法