スワイプでスライドするタッチスライダーを実装する「Swiper」

「Swiper」はスマホでスワイプすることで機能する、タッチスライダーを実装するJSライブラリです。

「Swiper」

screenshot221

jQueryで実装しているとは思えないほど滑らかにスライドします。またスライドの種類が豊富で、縦、横、またはその組み合わせや、タブなんかも実装できます。PCではドラッグでスライドさせることが出でき来ます。

 

一般的な横スライドです。

screenshot222

1ページに複数のスライドを含ませることもできます。

screenshot223

横をベースに、縦スライドも含ませています。面白いですね。

screenshot224

こんなのも実装できます。アイコンリストが横スライドし、アイコンをタッチすると紹介文章が表示されます。

screenshot225

 

「Swiper」の基本的な横スライドの実装方法をご紹介します。まずは外部ファイルを読み込みましょう。

<link rel="stylesheet" href="idangerous.swiper-2.css">
<script src="idangerous.swiper-2.js"></script>

 

HTMLはこのようにマークアップします。コメントを参考にしてください。

<div class="swiper-container">
  <div class="swiper-wrapper">
      <!-- 1枚目のスライド -->
      <div class="swiper-slide" style="background: red">
        <!-- 1枚目のスライド 内容 -->
        aaa
      </div>
      
      <!-- 2枚目のスライド -->
      <div class="swiper-slide" style="background: green">
        <!-- 2枚目のスライド 内容 -->
        bbb
      </div>
      
      <!-- 3枚目のスライド -->
      <div class="swiper-slide" style="background: blue">
        <!-- 3枚目のスライド 内容 -->
        ccc
      </div>
  </div>
</div>

 

CSSでスライドの高さ、幅を決めましょう。

.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

 

JavaScriptはこのように実装します。optionはたくさんありますが、基本的な例として。jQueryで実装することも可能です。

window.onload = function() {
	var mySwiper = new Swiper('.swiper-container',{
		//Your options here:
		mode:'horizontal',
		loop: true
		//etc..
	});  
}

 

するとこのようにスライダーを実装することができました。とても簡単です。

screenshot226

スマホからのアクセスはとても多くなっています。サイト制作者はスマホ向けのサイトデザインをおろそかにできません。こういった機能も検討してみてはいかがでしょうか。

 

Home > JavaScript > スワイプでスライドするタッチスライダーを実装する「Swiper」

Return to page top