<景品表示法に基づく表記 > 本サイトのコンテンツには、商品プロモーションが含まれている場合があります。

JavaScript Web制作

【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法

スポンサードリンク


数あるJavaScriptスライダープラグインの中で、
・bxslider.js
・slick.js
の著名ですが今回利用したのが「Swiper」です。

Swiperのメリット

Swiperはオプションが多く、いろいろなスライダーを作ることができます。

・IE11対応
・jQueryが不要
・スマホOKでタッチやスワイプにも対応
・オプションがありすぎてちょっと面倒

とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。
デモを見るだけでも大変です。IE11だと結構動作が重いです。

Swiper Demos

Swiperの実装

CSS,JSを読み込み、使いたいスライダーのオプション雛形をコピペして貼り付けるところから始まります。
CDNがあるので手軽に使いたい人はCDNが無難です。

■headerに記述

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

■ページ内に記述

<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
CDNを使ってjQueryのライブラリファイルを読み込みするメリット・デメリット

・最新版を読み込める
・外部サーバーから読み込むため、外部サーバーがダウンしたら使えなくなる。またネットワークで遮断していると使えない

サンプル

Swiperを使って端がちょっと見えるスライダーを実装するのですが、
Swiperのテンプレートは「Auto Slides Per View / Carousel Mode」を選びました。

ポイント


Swiperのスライド数は指定ができますが、widthがjavascriptで自動設定されるので
cssにwidthを指定して幅を変えます。

See the Pen
gObRBOO
by miccyome (@miccyome)
on CodePen.

テンプレートは各スライダー下にあるSource codeのリンクを押すと
Githubのソースが表示されるのでそこからコピペです。

headタグ内にあるstyleタグに書かれているcssも使用しますので
忘れずにコピペします。

Swiperでは.swiper-container,.swiper-wrappeで囲み、一つ一つのスライドは「swiper-slide」で囲みます。

最後に Initialize Swiperと書かれている箇所のjavaScriptでSwiperのスライドを設定します。
ここで設定できるオプションはSwiper公式サイトのAPIページで見られます。
Swiper API

<!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>

ポイント


・slidesPerView => スライド数
・spaceBetween => スライド横の隙間
・pagination: el => ページネーションの要素(○など)
・clickable -> ページネーションを押したときにそのスライドへ移動。

テンプレートからコピーしたままだとスライドが画面ピッタリにはまっており、
端が見えません。
そこでCSSで調整を入れます。

.swiper-slide {
    width: 41% !important;
}

これで下の画像のように3つ目のスライドがちょっぴり見えて、
「まだ続きがあるのかな?」とユーザーへ思わせられるスライダーが出来上がります。

スポンサードリンク

おすすめ記事一覧

今月のおすすめプラグインセール! 1

今月のおすすめプラグインセール! DTMで使えるVST/AU/AAX対応プラグインのセール情報ページです。※価格は為替レートで変動します。 DTMプラグイン購入サイト プラグインが購入できるサイトはいくつかありますが、その中でもpluginboutiqueを激推しします。 購入したプラグインのアップデート管理、購入後のポイント利用、毎月変わる購入時のおまけプラグインと特典がもりだくさんです。 pl ...

2

DTMで使えるVST/AU/AAX対応プラグインのセール情報ページです。 このページで紹介しているセール情報はほんの一部。 今すぐセール会場を見るにはこちら >> pluginboutique年末セール会場はこちら >> bestservice年末セール会場はこちら >> ※随時更新予定 ※表示価格は為替レートで変動します。 おすすめの年末DTMセール Solid State Logic SSL ...

3

Scaler2とは? Scaler2はコード進行を作るときに必要となる機能を網羅しているプラグインです。 作曲していてこんな悩みはありませんか? 例えば このコード良いな!と感じたときにどんな構成音かわからなくて鍵盤が押さえられない コード進行を考えているときに前後の順番を入れ替えたかったけど、入れ替えるのが面倒 コード進行を聞いてみて良いものを選びたい 同じコード進行だけどキーを変えて聞いてみた ...

4

「Instacomposer」はメロディ、ベース、パッド、コードのパターンを最大5トラック同時にMIDI作成できる作曲補助ツールです。 買っても大丈夫!? Instacomposer について Instacomposer サウンドチェック https://youtu.be/eXa1ix1xJdg https://youtu.be/ecOwMJxam9o Instacomposer で作曲の苦手意識 ...

-JavaScript, Web制作
-,