NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

jQueryで超低機能なカルーセルスライダーを作ってみる

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1162日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

ども、おひさしぶりです。
ようやくパソコンの設置ができましたので、またちょこちょこと更新していければなと思います。

今日はjQueryでたまにみるカルーセルスライダー。プラグインを使ってもいいですが、結構JS触ってるのでそろそろ本当に簡単なものなら作れるんじゃないかとおもって、試しに作ってみました。

組み込む機能

とりあえずこれだけは入れておかないとダメだろうという機能を挙げていきます。

  • リストでも何でもいいけど、一定の法則で配置された要素を横に並べて順番にスライドさせる(今回はリストで作成)
  • ナビゲーションボタンがあってスライドを行ったり来たりさせられる
  • 自動的に移動する機能はあってもいいし、無くてもいい
  • 一番最後の要素まで来たら、最初に戻って欲しい

たぶんこのくらいの機能があれば、良いんじゃないんでしょうかね?

作ってみた

ということでできたのがこちら。

html

scss

javascript

今回は自動スライド機能はつけていませんが、あったほうがよさそうならば、 タイマーを用意して定期的に do_slide_next() を呼んであげればOKだと思います。

とりあえずデモを用意してみました。

というわけでこれで一応「超低機能なカルーセル」が完成しました。

でも本当に最低限の機能しかありませんので、使いやすくするにはもうちょっと工夫が必要かもしれませんね。。

TAGS