0%

Programmingプログラミングナレッジ

Posted:2017.11.02

プラグイン【Swiper】で作成するスライドショーいろいろ

まだまだクライアントワークで使用頻度が高いスライドショーですが、サイトデザインの多様化とともにいろんなバリエーションが求められるようになってきています。そんな要望に対して簡単にお答えすることができるプラグインが「Swiper」です。今回はこのプラグインで様々なスライドショーを簡単に作成する方法をまとめていきたいと思います。

 

スライドショー用のjavascriptプラグイン【Swiper】

Swiperはjavascriptのプラグインで、いろんな形のスライドショーを簡単に作成することができるのが大きな特長です。そして、jQureyを使わなくても動作するため、コンフリクトなどのトラブルもなく安心して使うことができます。

 

【Swiper】
http://idangero.us/swiper/

 

実装方法もいたってシンプルで、SwiperのCSSとjavascriptファイルをそれぞれロードし、スライドショー部分を下記のようにHTMLで構成します。ちなみにSwiperのCSSとjavascriptファイルはCDNでも利用できます。(上記公式サイト参照)

【HTML】(一部抜粋)

<html>
  <head>
    <link rel="stylesheet" href="[FILE_PATH]/swiper.min.css">
  </head>
  <body>
 
  <!-- swiper start -->
  <div class="swiper-container">
 
    <!-- swiper スライド部分 -->
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ1"></div>
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ2"></div>
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ3"></div>
      <div class="swiper-slide"><img src="./image-01" alt="スライドイメージ4"></div>
    </div>
 

    <!-- swiper ページャー部分 -->
    <div class="swiper-pagination"></div>
 
    <!-- swiper ナビゲーション部分 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
   </div>
   <!-- swiper end -->
 
   <script src="[FILE_PATH]/swiper.min.js"></script>
 </body>
</html>

 

次にCSSでSwiperのラップ要素の幅と高さを適宜指定しておきます。

【CSS】

.swiper-container {
   width: 600px;
   height: 400px;
}

 

そしてjavascriptでスライドショー部分の定義を関数内で指定していきます。ここではパラメーターごとに様々な仕様が設定できます。詳しくは公式サイトを参照していただくのですが、主なパラメーター設定をまとめていきたいと思います。まずは基本となるSwiperの初期化形を見ていきます。

【javascript】

var mySwiper = new Swiper ('.swiper-container', {
 
   // スライドショーの設定(各パラメーターを入力)
   speed: 500,
   loop: true
 
   // ページャーの出力
   pagination: {
     el: '.swiper-pagination',
   },
 
   // ナビゲーションの出力
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   }
 
});

 

Swiperの各パラメーター

上記のコードで次にあげるパラメータを設定することで自由にスライドショーの仕様を決めることができます。以下一部になりますがよく使うものをまとめております。

 

direction スライドの方向 / horizontal:横方向、vertical:縦方向
speed スライドの移動スピード / ミリ秒の数値で指定
spaceBetween スライド間の余白 / px換算の数値で指定
slidesPerView 表示区域内に表示させるスライドの枚数 / 枚数を数値で指定、auto
centeredSlides 表示区域内の中心にスライドを合わせる / true、false
loop スライドを無限にループ表示させる / true、false
effect スライドの表示方法を指定 / slide、fade、cube、coverflow、flip
autoplay スライドの自動再生 / delay:3000などスライド開始までの時間をミリ秒で指定
breakpoints レスポンシブ時の制御をブレークポイントで指定 / 320:{ パラメータ設定 }という形でブレークポイントを数値で指定

 


 

いかがでしょうか、各パラメーターを組み合わせて自分好みの仕様で簡単にカスタマイズできるのは便利ですね。この他にもいろんな設定が可能です。今回のサンプルはこちらに用意しましたのでご参考に!

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】