読者です 読者をやめる 読者になる 読者になる

WEBアザラシ

デジハリという海で泳ぐアザラシのブログ

【Swiper】JSでお手軽に実装出来るレスポンシブにも対応の超絶軽量スライダー


どーも、あざら氏です。

どうせ元から人に伝える気がないブログですが
将来の自分の整理のために…(いきなりマイナス思考w

今回、書くのはJSで実装するスクリプトです。
割りとマルチに使えるレスポンシブ対応のスライダー
それが「Swiper」です。

Swiper - Most Modern Mobile Touch Slider

 

なぜ使おうと考えたかと言いますと
「レスポンシブ対応 スライダー」でググったら出てきたからです。

今これを書いてる状況が凄く眠いので文もグチャグチャです。
勿論、スクショを撮るなんて気持ちは毛頭ありません。
そもそも誰かに分かりやすくという気持ちは更々ありませんので
ちゃんと理解したい方はコリスさんの記事をオススメしますw

coliss.com

とか言ってるけど、
コリスさんの記事もGet Startedの内容なので
英語苦手とかでなければさっさと公式を見ることをオススメしますw

Getting Started With Swiper

まず、とりあえずSwiperのGithubからファイルを落とします。

github.com

どうでも良いけど誰だよこのイケメンなおっさん↑

ちなみになんとCDNまで用意されているらしい。
CDNはバージョンの部分を最新版に書き換えないといけないんですが
僕はそれが面倒だったのと中身を色々見たかったので
とりあえずGithubからダウンロード。

ちなみにバージョンはトップページに書いていましたww
2015の10/10にv3.1.7がリリースされたらしいです。

基本的に新しいランディングページで製品ギャラリーとして
使用しようと思っていたのでそんな凝ったものは要りません。
ただ、Demosを見てると色々応用出来そうな匂いがしますね。

Swiper Demos

とりあえず適当にこのSpace Between Slidesというスライダーを
ブチ込むことに。ぶち込み方は非常に簡単です。

とりあえず前述のDemosから良さ気なスライダーを選んで
SorceCodeを見るだけ。そしてコピペするだけ。

いやまあ当たり前っちゃ当たり前ですがw

センタリングレイアウトのレスポンシブを使ってるので
実はレスポンシブ対応とか要らなかったんですが、まあいっかw
タッチ操作でのスワイプでも使用できるのは大きいですね。

ギャラリーを作る際、最初はLightBox辺りのスクリプト
借りようと思っていたのですが、タップして閉じるのがダルい上に
サイトが間延びするように思ったのでスライダーを選びました。
WiredもAmazonもスライダーだし、多分A/Bテストしてもスライダーの方が
良いんじゃないんでしょうか??

デモを見てても色々と汎用性が高そうなので
今後もまた使ってみようと思いました。
あと、Flexboxにも対応しているそうで。
僕はまだFlexなんてハイカラなものを使っていませんが
将来的に使って行く時に役に立ちそうですね。
そういった意味も期待が持てるスクリプトでした。


以上!
ここまで読んで頂いて感謝感激です!!

*Flexboxについて

liginc.co.jp