コピペで簡単!高機能スライダー[Swiper.js v6]の使い方|Javascript

javascript
この記事は約5分で読めます。
スポンサーリンク

自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。
「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Prevボタンの挙動」、「スライド数と現在のスライド位置を表示する●の設置」などなど、スライダーを作るだけでひとつのサイトを作るくらいの手間がかかる。
そんな手間と時間を一気に解消してくれるのがSwiper.js。

はじめに

Swiper.jsは、モダンブラウザ向けに作られた高機能で軽量なプラグイン。(IEは非対応)
Swiper.jsのページは下のリンクから確認できます。
swiperjs.com/
Swiper GitHub
Swiper ダウンロード
Swiper デモ

Swiper.jsをダウンロードして利用

デモページを見ると色んなスライダーの設置が可能で魅力的だけど、ここでは一般的によく使うスライダーの実装について解説していきます。
まずSwiper.jsをダウンロードするかCDNで利用します。
CDNの場合、何年か経つと更新され利用できなくなることがあるのでダウンロードして利用するのが確実だと思います!
下のダウンロードボタンからCSSとJSファイルをダウンロードしてね。

CSSフォルダとJSフォルダを作ってダウンロードしたファイルをその中に入れます。
ファイルを各フォルダにいれたらHTMLの「<head></head>」内にSwiperを追加しましょう。
こちら ↓ をコピペしてね。

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

Swiper.jsをCDNから利用

CDNを利用する場合は下のソースをコピーして利用してください。
HTMLの「<head></head>」内にSwiperを追加しましょう。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>

HTMLの書き方

「<head></head>」内にSwiperのCSSとJSを追加したら
次に下のHTMLを「<body></body>」内にコピーして利用します。

<div class="swiper-container">
  <!-- スライドメニュー -->
  <div class="swiper-wrapper">
    <!-- スライドメニュー内容を個々に追加してください -->
    <div class="swiper-slide">スライド1</div>
    <div class="swiper-slide">スライド2</div>
    <div class="swiper-slide">スライド3</div>
    <div class="swiper-slide">スライド4</div>
    </div>
  <!-- スライドのページネーション表示 -->
    <div class="swiper-pagination"></div>
    <!-- 「次へ」や「戻る」のアイコン表示 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- スクロールバーの表示 -->
    <div class="swiper-scrollbar">
  </div>
</div>

最後にJSでスワイパーを初期化

最後にJSファイルにスワイパーの初期化コードをコピペして終わりです。
このJSでスワイパーの表示を色々指定できるので
個性的なスライダーを作る場合は「Swiper.jsの機能一覧と使い方」から色々試してみてください!
一般的なスライダーならこのまま利用してください。

  const swiper = new Swiper('.swiper-container', {
    // スライドメニューの表示方法
    direction: 'horizontal',
    loop: true,
    autoHeight: true,
    autoplay: {
      delay: 1000,
    },
    // スライドのページネーション表示
    pagination: {
      el: '.swiper-pagination',
    },
    // 「次へ」や「戻る」のアイコン表示
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // スクロールバーの表示
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });

デモで動きを確認

「.swiper-slide」内に画像やリンクを追加してそれっぽいスライダーが出来ました!
分かりやすいようにスライドのスピードを早くしている(delay: 1000の部分)ので、
必要な機能や不要な機能が有ったら追加で修正してくださいね。
英語でちょっと分かりにくいけど下のページで機能の追加や表示の変化を指定できますので参考にしてください。

Swiper.jsの機能一覧と使い方

SNSフォローボタン
エンデ・バタローをフォローする
javascriptサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました