仕事でjavascriptのコードを読んでいた時に自分も興味を持ってしまったので、勉強用に作ってみることにした。
紹介
名前
waiwai-carousel 【github】
- 色々機能を入れているので、賑やかなプラグインという意味でこの名前になった。
特徴
- リスト要素に対して簡単な記述をするだけでカルーセルの動作を実装できる
- リスト毎のサイズは自由に設定できる
- 好きな要素をnext・prevボタンにできる
- 特に指定しなければ、親要素のサイズを見て自動的にカルーセルの範囲を調整してくれる
- 縦・横方向どちらにも対応
- 移動量変更可能
- アニメーションの時間を変更可能
- 各イベントのコールバックを設定できる
使い方
javascriptの読み込み
head内など任意の場所にjQueryとセットで読み込む
<head>
...
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.waiwai-carousel.js"></script>
...
</hrad>
waiwai-carouselを適用する時の定義
任意の場所のscriptタグ内に定義する。オプションはデフォルトから変更したいものだけ記述するとスッキリする。
<script type="text/javascript">
$(document).ready(function() {
// ulタグを指定してね
$('.ultag').waiwaiCarousel({
// カルーセルの幅。autoだと親要素に追従する
width: 'auto',
// カルーセルの高さ。autoだと親要素に追従する
height: 'auto',
// カルーセルの移動する向き。縦の場合はvertical
direction: 'horizontal',
// 押した時に次に移動させるための要素を指定できる
next: null,
// 押した時に前に移動させるための要素を指定できる
prev: null,
// カルーセルの移動時間
animationDuration: 500,
// 移動量
transitionSize: 'auto',
// 次が押された時に呼ばれるコールバック
onNextClick: null,
// 前が押された時に呼ばれるコールバック
onPrevClick: null,
// カルーセルの移動を始めた時のコールバック
onTransitionStart: null,
// カルーセルの移動を終えた時のコールバック
onTransitionEnd: null
});
});
</script>
CSSの設定
- カルーセル内の並び方はwaiwai-carousel側で自動でセットしていないので使う側が設定する必要がある。
- 横に並べたいときはliタグに対してinline-blockかfloatを掛けると良い
- 最初横置きの場合はプラグイン側で自動で要素に対してCSSを掛けるようにしてたんだけど、inline-blockに隙間ができる問題があったり、float使うとvertical-alignが効かなかったりするので、そういう細かい調整は使う側の好みに任せるようにした。
- サンプルではinline-blockで配置し、ulに対してfont-size=0pxを設定し、li要素内でfont-sizeを再セットする方法を使っている
- 横置きとかプラグイン側で自動に追加される要素に対してCSSを自動的に入れるのは良いと思うけど、それ以外の要素に対して勝手にスタイルを適用するのは良くないかなと思ったので、基本プラグイン側からスタイルを適用するのはなしにしてる。(計算狂わせないためのスタイルはいくつか適用している)
サンプル
色々な設定とその動作をまとめたので、細かい使い方はこっちで確認してね
- http://htmlpreview.github.io/?https://github.com/chuross/waiwai-carousel/blob/master/sample/index.html
- a～lまでの項目があって、可変のサンプルは全部表示されてる状態だとnext押しても反応しないのでウインドウサイズ変更して試してみてね
技術的な話題
多機能にしようと思った経緯
- カルーセルの動作は一つのサイト内でも色々な場所で使われてることがある
- トップページとか商品説明画面のサムネイルとか
- 用途ごとにカルーセル作ってるとキリがないし、やりたいこと大体一緒なのに使い分けるのは面倒
こだわったとこ
- とにかく呼び出しを簡単にして、面倒なことは大体プラグインが吸収するようにしたい
- カルーセルの移動する単位をul単位にするやり方は個人的に好みではなかったので、個々のliタグの幅を見て移動量を計算するようにした
- 仮にブラウザのサイズが変えられていたとしても、ちゃんと動作するようにしたい
テスト書いた
- jQueryのテストってどうやるのか興味があったので書くことにした
- ライブラリなら他の人が使う可能性も考えてテスト追加するべきだよねっていうのもある
- 今回テストに使ったのはQUnitを使った
- 簡単に導入できて、jQueryのコールバック後のテストとかもちゃんと書けるので特に不満なく書ける
- テストはこんな感じ
- http://htmlpreview.github.io/?https://github.com/chuross/waiwai-carousel/blob/master/test/qunit.html
今後追加していくもの
- カルーセルのループ
- 当初から作ろうと決めていたものの、まだ手を付けてない
- リスト要素の幅・高さ変更にも対応
- 現状だと親要素の変更には対応してるけど、リスト要素の幅が可変になってると正しく動かない
- 反省会の内容は直す
反省
- スマホだと正常に動かない
- クリックイベントが2回拾われて端っこで止まるはずが止まらなかったりしてる
- い、一体何がどうなて
- 現状だとリスト要素の柔軟な変更に対応してない
- リスト要素が可変だと、移動量の計算が古い値を基に計算してしまう
- ここらへんまだ脳筋で使えない部分なので何とかする
備考
コードはforkして煮るなり焼くなりご自由に