ZeroPlus Media > Web制作 > JavaScript > 【JavaScript】Swiperの使い方とオプション・カスタマイズ方法について解説

【JavaScript】Swiperの使い方とオプション・カスタマイズ方法について解説

JavaScript

2022/11/18

2023/06/02

この記事では、「Swiperの使い方とオプション」について詳しく解説します。記事の後半ではWeb制作でよく使われるSwiperの「スライドショー」「カルーセルスライダー」「レスポンシブ」の3つのカスタマイズ事例も紹介していきます！

この記事で身につく内容

Swiperの使い方
Swiperのオプションの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

Swiperとは

Swiperとはスライドショーが作れるJavaScriptのプラグインです。

他にスライドショーが作れるプラグインには「slick」があります。slickはjQueryに依存するプラグインですが、SwiperはjQueryに依存しないプラグインです。そのためSwiperは、jQueryを読み込まない分動作が軽くなっています。

Swiperの使い方

ここからはSwiperを使うための準備と、基本的な使い方について解説します。

Swiperの導入方法

導入方法としては下記2つの方法があります。

ローカルファイルとしてダウンロード
CDNを利用する

Swiperを導入する場合はCDNを利用するのが簡単です。ローカルにファイルをダウンロードしなくても、公式サイトの記述をheadタグやbodyタグにコピー&ペーストするだけで使えるからです。

ただし、自社のサーバーにSwiperファイルを保存して利用する場合は、ローカルファイルにダウンロードしましょう。

CDNを使う場合

CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称で、外部ファイルをリンク1つで使用することができる仕組みのことです。

1. SwiperのCDNを準備する

CDNを利用する場合は、まずSwiperの公式サイトの「Get Started」をクリック。

「Use Swiper from CDN」の部分にリンクが載っているので、こちらのコードをheadタグに貼り付けます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

2. SwiperのHTMLテンプレートをHTMLファイルに貼り付ける

「Use Swiper from CDN」の少し下のあたりに「Add Swiper HTML Layout」があります。

そこにSwiperのHTMLテンプレートが載っています。そのコードをコピーして、HTMLファイルに貼り付けてください。

<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
  <!-- スライドを囲む要素（必須） -->
  <div class="swiper-wrapper">
    <!-- スライド要素（必須） -->
    <div class="swiper-slide"><img src="スライド画像1のパス" alt=""></div>
    <div class="swiper-slide"><img src="スライド画像2のパス" alt=""></div>
    <div class="swiper-slide"><img src="スライド画像3のパス" alt=""></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>

SwiperのHTMLの基本構成は下記のとおりです。下記の3つは必須要素となります。

スライダーのメインコンテナ要素
スライドを囲む要素
スライド要素

下記HTMLの3つの記述は省略可能な要素となります。

ページネーション要素
ナビゲーションボタン要素
スクロールバー要素

3. Swiperを初期化

Swiperの初期化をするため、下記のコードをJavaScriptファイルに記述します。なお、ページネーション・ナビゲーションボタン・スクロールバーの部分は省略可能です。

let mySwiper = new Swiper ('.swiper', {

  // オプション設定
  loop: true,

  // 以下のコードは省略可能
  //ページネーション表示設定
  pagination: {
    el: '.swiper-pagination', //ページネーション要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },

  //ナビゲーションボタン（矢印）表示の設定
  navigation: {
    nextEl: '.swiper-button-next', //「次へボタン」要素の指定
    prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
  },

  //スクロールバー表示の設定
  scrollbar: {
    el: '.swiper-scrollbar', //要素の指定
  },
  //ここまで省略可能
});

ローカルファイルとしてダウンロードする場合

1. ローカルファイルの準備

まず、Swiperを動かすために必要なCSSファイル、JavaScriptファイルを以下のページからダウンロードします。

https://unpkg.com/swiper/

「swiper-bundle.min.css」「swiper-bundle.min.js」をそれぞれクリックして開きます。

ファイルをクリックすると下記画像のような画面になります。画面右上の「View Raw」をクリックするとそのファイルが開くので、コピーするか保存します。

上記でローカルに作成したswiper-bundle.min.css、swiper-bundle.min.jsを、下記のようにheadタグに記述します。

<!-- swiperのCSSファイル -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">

<!-- swiperのJavaScriptファイル -->
<script src="js/swiper-bundle.min.js"></script>

２. SwiperのHTMLテンプレートをHTMLファイルに貼り付ける

「Use Swiper from CDN」の少し下あたりに「Add Swiper HTML Layout」があります。（ここからはCDNを使う場合と同様です）

そこにSwiperのHTMLテンプレートが載っています。そのコードをコピーして、HTMLファイルに貼り付けてください。

<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">

  <!-- スライドを囲む要素（必須） -->
  <div class="swiper-wrapper">
    <!-- スライド要素（必須） -->
    <div class="swiper-slide"><img src="スライド画像1のパス" alt=""></div>
    <div class="swiper-slide"><img src="スライド画像2のパス" alt=""></div>
    <div class="swiper-slide"><img src="スライド画像3のパス" alt=""></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>

4. Swiperを初期化

Swiperの初期化をするため、下記をJavaScriptファイルに記述します。

let mySwiper = new Swiper ('.swiper', {

  // オプション設定
  loop: true,

  // 以下のコードは省略可能
  //ページネーション表示設定
  pagination: {
    el: '.swiper-pagination', //ページネーション要素
    type: 'bullets', //ページネーションの種類
    clickable: true, //クリックに反応させる
  },

  //ナビゲーションボタン（矢印）表示の設定
  navigation: {
    nextEl: '.swiper-button-next', //「次へボタン」要素の指定
    prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
  },

  //スクロールバー表示の設定
  scrollbar: {
    el: '.swiper-scrollbar', //要素の指定
  },
  //ここまで省略可能
});

Swiperの基本サンプル

以下がSwiperの使用サンプルです。

必須要素である下記3つをHTMLファイルに記述しています。

swiper要素（スライダーのメインコンテナ要素）
swiper-wrapper要素（スライドを囲む要素）
swiper-slide要素（スライド要素）

省略可能な要素であるページネーション、スクロールバー、ナビゲーションボタンはこのサンプルでは記述しません。

JavaScriptファイルにSwiperの記述をして、オプションではloop（スライドの無限再生）を設定しています。

<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
  <!-- スライドを囲む要素（必須） -->
  <div class="swiper-wrapper">
    <!-- スライド要素（必須） -->
    <div class="swiper-slide"><img src="images/sample.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample2.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample3.png" alt=""></div>
  </div>
</div>

.swiper {
  max-width: 400px;
}

.swiper-wrapper {
  height: auto;
}

.swiper-slide {
  height: auto;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}

let mySwiper = new Swiper ('.swiper', {
  // オプション設定
  loop: true,
});

出力結果

Swiperのオプション

Swiperには多数のオプションが用意されています。

オプションでは以下の設定をすることができます。

スライドの無限ループ、自動再生
ナビゲーションやページネーション、スクロールバーの設定
垂直スライド
グリッドスライド
エフェクトキューブ...etc

オプションの使い方

Swiperのオプションは「オプション名：値」のように記述し、オプションを追記する場合は「,（カンマ）」区切りで追記します。

オプションは値を「ture / false」のどちらかを設定するものもあれば、数字を設定したり、「’値’」のように記述したりするものもあります。

オプションによって設定する方法が違うので注意しましょう。

オプションの記述方法

let mySwiper = new Swiper ('.swiper', {
  // オプション設定
  // ここにオプションを記述する
  // オプションを追記する場合、「,（カンマ）」で区切る
  オプション名: 値,
  オプション名: 値
});

制作で使われるオプションを2,3個ずつまとめて紹介します。

なお、設定できるオプションやそのパラメータは数が多いので、ここではすべて紹介しませんが、一部を紹介していきます。

オプション：loop, autoplay

loop, autoplayオプションについて解説します。

オプション名	値（赤字は初期値）	概要
autoplay	true/false	自動再生
loop	true/false	無限再生

2つのオプションを使用した、写真が自動で切り替わっていく動きの例を紹介します。

let mySwiper = new Swiper ('.swiper', {
  // オプション設定
  loop: true, // スライドの無限ループ
  autoplay: { // スライドの自動再生
    delay: 3000, // スライド間の遷移の遅延を設定 (ミリ秒設定） 1000ミリ秒=1秒
  },
});

出力結果

今回のサンプルではオプションにより以下3つの設定を行いました。

autoplay: true で自動再生
delay: 3000 で3秒ごとにスライド
loop: true で無限に再生

オプション：pagenation, navigation, scrollbar

pagenation, navigation, scrollbar について解説します。

それぞれ、JavaScriptファイルに記述するだけではなく、HTMLファイルにもオプションを表示させる要素を記述します。

pagenation：ページネーション表示

下記はpagenationのパラメータです。

パラメータ名	値（赤字は初期値）	概要
el	null	ページネーション要素のCSSセレクタまたはHTML要素を指定
type	bullets / fraction / progressbar / custom	表示形態を指定
clickable	true/false	ページネーションのアイコンクリックで対応スライド表示

navigation：ナビゲーション（前後スライドボタン）表示

下記はnavigationのパラメータです。

パラメータ名	値（赤字は初期値）	概要
nextEl	null	「次へ」ボタン要素のCSSセレクタまたはHTML要素を指定
prevEl	null	「前へ」ボタン要素のCSSセレクタまたはHTML要素を指定
hideOnClick	true/false	スライダーのコンテナをクリックしたらナビゲーションボタンの表示・非表示切り替え
disabledClass	'swiper-button-disabled'	前後のスライドがないときに、指定のクラス付与
hiddenClass	'swiper-button-hidden'	ナビゲーションボタン非表示の場合に付与されるクラス名

scrollbar：スクロールバーの表示

下記はscrollbarのパラメータです。

パラメータ名	値（赤字は初期値）	概要
el	null	スクロールバー要素のCSSセレクタ、またはHTML要素を指定
hide	true/false	操作終了時に自動的に非表示
draggable	true/false	クロールバーをドラッグしてスライド操作

3つのオプションを使用した、ボタンを押すことで画像を切り替えられる動きの例を紹介します。

<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
  <!-- スライドを囲む要素（必須） -->
  <div class="swiper-wrapper">
    <!-- スライド要素（必須） -->
    <div class="swiper-slide"><img src="images/sample.png" alt=""></div>
    <div class="swiper-slide"><img src="images/sample2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/sample3.png" alt=""></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>

let mySwiper = new Swiper ('.swiper', {

  // オプション設定
  loop: true,
  autoplay: {
    delay: 3000,
  },

  pagination: {
    el: '.swiper-pagination', //ページネーション要素
    type: 'bullets', //ページネーション種類
    clickable: true, //クリックに反応させる
  },

  //ナビゲーションボタン（矢印）表示設定
  navigation: {
    nextEl: '.swiper-button-next', //「次へボタン」要素指定
    prevEl: '.swiper-button-prev', //「前へボタン」要素指定
  },

  //スクロールバー表示設定
  scrollbar: {
    el: '.swiper-scrollbar', //要素指定
  },
});

出力結果

今回のサンプルではオプションにより以下3つの設定を行いました。

paginationでページネーション表示。typeにfractionを適用。
navigationでナビゲーションボタン表示。
scrollbarでスクロールバー表示。

pagenation, navigation, scrollbar を使う場合は、HTMLにページネーション要素、ナビゲーションボタン要素、スクロールバー要素の記述を忘れないようにしましょう。

オプション：initialSlide, speed, effect

initialSlide, speed, effectについて解説します。

オプション名	値（赤字は初期値）	概要
initialSlide	0	最初に表示させるスライド番号
speed	300	ライドが切り替わるアニメーション速度（ミリ秒）
effect	’slide’ /’ fade’ / ‘cube’ / ‘coverflow’ / 'flip'	スライドの動きエフェクト指定

3つのオプションを使用した、フェードイン・アウトしながら画像を自動的に切り替える動きの例を紹介します。

let mySwiper = new Swiper ('.swiper', {

  // オプション設定
  loop: true,
  autoplay: {
    delay: 3000,
  },

  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  scrollbar: {
    el: '.swiper-scrollbar',
  },

  // 以下、追記
  initialSlide: 1, // 1枚目スライドを「0」、2枚目スライドを「1」として指定
  speed: 1000, // スライドアニメーション速度（ミリ秒） 1000 = 1秒
  effect: 'fade', // スライドの動きエフェクト指定
});

出力結果

今回のサンプルではオプションにより以下3つの設定を行いました。

initialSlideで「1」を適用し、2枚目のスライドを初期表示（1枚目のスライドが「0」、2枚目のスライドが「1」、3枚目のスライドが「2」と数える）
speedで1000ミリ秒（1秒）ごとにスライドが切り替わるアニメーション設定
effectでスライドの動きをフェードイン

swiperでカルーセルスライダーのカスタマイズ

カルーセルスライダーとは、横にスクロールするスライドギャラリーのことです。

カルーセルスライダーで、3つの画像をスライド表示させてみましょう。

<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
  <!-- スライドを囲む要素（必須） -->
  <div class="swiper-wrapper">
    <!-- スライド要素（必須） -->
    <div class="swiper-slide"><img src="images/dummy.png" alt=""></div>
    <div class="swiper-slide"><img src="images/dummy2.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/dummy3.jpg" alt=""></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>

.swiper{
  max-width: 100%;
}

.swiper-wrappar {
  height: auto;
}

.swiper-slide {
  height: auto;
}

.swiper-slide img{
  width: 100%;
  height: 100%;
}

let mySwiper = new Swiper('.swiper', {

  // オプション設定
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },

  speed: 1000,
  effect: 'slide',
  slidesPerView: 3, // 画像の表示枚数
  spaceBetween: 20, // 画像間の余白（px）
});

出力結果

表示するスライドの枚数は、オプションのslidesPerViewで指定できます。スライド画像間の余白は、spaceBetween: 20 （20px）を適用しています。

Swiperのスライドショー

Swiperを使ってスライドショーを実装してみましょう。

let mySwiper = new Swiper('.swiper', {
  // オプション設定
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  speed: 1000,
  effect: 'slide',
});

出力結果

Swiperのレスポンシブ

Swiperではオプションでレスポンシブの設定をすることができます。

例えば、モバイル表示ではスライドショー、PC表示では縦にスライドさせる動きは、以下のコードで実装できます。

let mySwiper = new Swiper('.swiper', {
  // オプション設定
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  speed: 1000,
  effect: "slide",
  slidesPerView: 1,
  breakpoints: { // ブレイクポイント
    992: { // 画面幅992px以上で適用
      slidesPerView: 3,
      spaceBetween: 20
    }
  },
});

出力結果

breakpointsオプションでブレイクポイントを設定できます。上記ではブラウザ幅が992px以上になったとき、下記になるように設定しました。

slidePerViewでスライド枚数が3枚表示
スライド間余白が20px

Swiperが動かないときの対処法

Swiperが動かない場合は以下の理由が考えられます。

SwiperのCSS・JavaScriptファイルを読み込んでいない
ファイルの読み込みの記述順が間違っている
SwiperのCDNファイル、もしくはダウンロードしたファイルが正しく読み込まれていない
HTMLにSwiperの必須要素を記述していない
JavaScriptファイルでの記述ミス

SwiperのCSS・JavaScriptファイルを読み込んでいない

SwiperはローカルファイルとCDN、どちらの場合でも共通でSwiperのCSS・JavaScriptファイルが両方必要です。

ローカルファイルの場合

<!-- swiperのCSSファイル -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">

<!-- swiperのJavaScriptファイル -->
<script src="js/swiper-bundle.min.js"></script>

CDNの場合

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

どちらかが記述されていないとSwiperは動かないので、確認しましょう。

SwiperのローカルファイルまたはCDNが正しく読み込まれていない

CDNのファイルやダウンロードしたファイルのパスが、headタグ内もしくは閉じbodyタグの直前に正しく記述されているか確認しましょう。

パスの記述が間違っていたり、CDNの場合はURLが間違っていると正しく読み込むことができません。

ファイルの読み込みの記述順が間違っている

URLやパスが正しく記述されていても、記述の順番が間違っていると動きません。コードは上から順に読み込まれるため、Swiperのファイルが先に読み込まれるようにしましょう。

例えば、以下のような場合ではSwiperは動作しません。（閉じbodyタグの直前に記述する場合）

　<!-- Swiperの設定が記述されているスクリプトファイル -->
　<script src="main.js"></script>

　<!-- SwiperのCDNファイル -->
　<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</body>

main.jsにはSwiperの設定が記述されていますが、SwiperのCDNファイルが後から読み込まれているため、Swiperが動作しません。

この場合、CDNファイル（もしくはローカルファイル）を先に記述し、後からmain.jsを読み込むように記述します。下記のように修正してみてください。

　<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

　<script src="main.js"></script>
</body>

headタグに記述する場合、Swiperの設定が記述されているファイルには「defer属性」を付与した状態で記述しましょう。

    <!-- SwiperのCDNファイル -->　
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

　<!-- Swiperの設定が記述されているスクリプトファイル -->
　<script src="main.js" defer></script>
</head>

defer属性

defer属性を付与されたJavaScriptファイルは、JavaScriptファイルの読み込みが、HTMLファイルの解析と並行で行れます。HTMLファイルの読み込み完了後にJavaScriptファイルの実行が開始されます。

HTMLにSwiperの必須要素を記述していない

HTMLファイルに、Swiperを構成する必須要素が記述されていない場合、Swiperはうまく動作しません。

HTMLファイルのSwiper必須要素とは下記の記述です。

<!-- スライダーのメインコンテナ要素（必須） -->
<div class="swiper">
  <!-- スライドを囲む要素（必須） -->
  <div class="swiper-wrapper">
    <!-- スライド要素（必須） -->
    <div class="swiper-slide"><img src="スライド画像1のパス" alt=""></div>
    <div class="swiper-slide"><img src="スライド画像2のパス" alt=""></div>
    <div class="swiper-slide"><img src="スライド画像3のパス" alt=""></div>
  </div>
</div>

上記の必須要素がファイルに記述してあるか確認しましょう。

JavaScriptファイルでの記述ミス

HTMLファイルにSwiperの必須要素を記述していても、JavaScriptファイルでの記述にミスがあると動きません。

例えば、下記のような理由が考えられます。

new Swiperのクラス名の記述間違い
オプション名の記述間違い
オプションを追記した場合ので、「,（カンマ）」区切り忘れ
オプションの値の記述ミス

new Swiperのクラス名の記述間違い

new Swiperの後に記述するクラス名の記述が違うと動作しません。

let mySwiper = new Swiper ('.swiper', { // クラス名間違い 
  // オプション設定
  loop: true,
});

オプション名の記述間違い

Swiperのオプションは数が多いので、オプション名は公式サイトで確認しましょう。

オプションを追記した場合で、「,（カンマ）」区切り忘れ

オプションを追記した場合は、「,（カンマ）」で区切ることを忘れないようにしましょう。

let mySwiper = new Swiper ('.swiper', { 
  // オプション設定
  loop: true // オプション追記する場合は「,」で区切る
　direction: "vertical",
});

オプションの値の記述ミス

Swiperのオプションの値は、オプションによって「’’（シングルクォーテーション、もしくはダブルクォーテーション）」で記述する値もあれば、true/false、数値で記述する値もあります。

こちらも公式サイトで確認しましょう。

まとめ

Swiperについて解説しました。SwiperはさまざまなオプションとCSSを組み合わせてカスタマイズすることができます。slickと違ってjQueryを読み込まない分、動作が軽いので、活用していきましょう！

今回紹介しきれなかったオプションはまだまだありますので、さらにオプションを追加してオリジナルのスライドショーを制作してみてください。

このようにWeb制作では覚えることがたくさんあります。少しずつ学習を進めていきましょう。

Web制作は、その他にも学ぶべき知識が数多くあります。

Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！

初学者が最速でWeb制作者になるために必要なスキルと学習ロードマップ

Swiperまとめ

Swiperはオプション設定が豊富
jQuery非依存で使えて、動作が軽い
オプションでレスポンシブ設定できる

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

おすすめのタグ

Swiper

この記事の執筆者

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

Google Foam(テキスト)で質問

フォーム送信

メールで解答

Google meet(オンラインmtg)で質問

日時選択

メールを受け取る

メールからmtgに参加