2016年前半の最近、カルーセルプラグインはSwiperを使っています

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

jQuery無しでも動きます。

Swiper – Most Modern Mobile Touch Slide
http://idangero.us/swiper/#.VvNC5BKLSi4

ダウンロードすると37個のデモが用意されているので、どういうことができるか、どうやって使うかがわかりやすいです。

DEMO

設置のコツ

要素をfloatさせないことです。floatさせていると、表示が崩れます。

ループする時は「loop: true,」を設定します。

スタートの位置を変える時は「initialSlide: 1,」で数字を指定します。

参考

Swiperプラグイン【日本語訳 】スワイプ対応のjavascriptスライダー

余談

今回は使いませんでしたが、このプラグインの動きがかっこいいので、機会があれば使いたいです。

Blueprints
http://tympanus.net/codrops/category/blueprints/

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*