スライダーJavaScript「Swiper」で簡単スマホ対応!軽量/レスポンシブ/スワイ

レスポンシブ・ウェブデザインを採用するにあたって、画像のスライダーをどうするか懸念するケースがあるかと思います。
そんな時はjQuery依存しない「Swiper」を選択肢に入れるのが賢明かもしれません。
スライダーJavaScript「Swiper」で簡単スマホ対応!軽量/レスポンシブ/スワイサンプル

使用方法 Swiperからファイル一式をダウンロード。
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
</script>

上記のように記述します。
jsはスライダー本体より、下に記載してください。
あとは下記のようにするだけで簡単に実現できます。 <div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>

また様々なオプションがあります。
スライドを縦方向にする「direction: 'vertical'」
1ページあたりのスライド枚数を設定する「slidesPerView: 3」
中央からスライドを始める「centeredSlides: true」
多様なエフェクト「effect: 'cube'」。その他fade、coverflow
demosフォルダを見ながら自分にあったスライダーを採用してみてください。

スライダーJavaScript「Swiper」で簡単スマホ対応!軽量/レスポンシブ/スワイサンプル

sponsors

「スライダーJavaScript「Swiper」で簡単スマホ対応!軽量/レスポンシブ/スワイ」をシェアする

記事作成:
記事URL:

TOP > > > スライダーJavaScript「Swiper」で簡単スマホ対応!軽量/レスポンシブ/スワイ