Swiperを使ってスライダーアニメーションを実装する〜導入編〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Swiperの概要、直接ファイルをダウンロードして導入する方法

■ 関連記事
・ [Swiperを使ってスライダーアニメーションを実装する〜使い方編〜](https://qiita.com/s79ns/items/dc35b526296351e93b3e)
・ [Swiperを使ってスライダーアニメーションを実装する〜ページネーションやナビゲーションのカスタマイズ編〜](https://qiita.com/s79ns/items/ab8af933b538fd53fd54)

## 概要

#### Swiper

SwiperはJavaScriptライブラリで、JQueryに依存せずJavaScript単体で動作させることができます。
導入も簡単で多機能のため、多くのユーザーに使われています。

## 導入

Swiperを導入するには、直接ファイルをダウンロードする方法と、CDNのようにサーバに読み込み
に行く方法などがありますが、今回は直接ファイルをダウンロードする方法をご紹介します。

① [公式ページ](https://swiperjs.com/)に移動します。

![スクリーンショット 2021-02-12 13.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/ba492c00-2ef6-5649-6e4f-2110f335e8e5.png)

② Get Startedをクリックします。

![スクリーンショット 2021-02-12 13.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/20d94516-b9ac-fdb8-13ab-93f2195e8dd2.png)

③ 左サイドバーから『Download assets』をクリックし、画面右側のURLをクリックします。

![スクリーンショット 2021-02-12 13.56.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/a6a1dbaa-a465-760b-8d92-6811a342424b.png)

④ 『swiper-bundle.min.css』と『swiper-bundle.min.js』をそれぞれ開きます。
<font color="gray">※ minは改行やスペースを省いた圧縮されたファイルのことを示します。</font>

![スクリーンショット 2021-02-13 14.14.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/41628d88-1119-c8ff-baa6-866734567709.png)

⑤ 『swiper-bundle.min.css』と『swiper-bundle.min.js』のそれぞれのファイルから、表示されたソースコードを全て選択し、ファイル毎に分けてコピーします。
<font color="gray">※ ソースコードが全て選択されるまで時間がかかる場合があります。また、ページネーションやバーが表示されない場合はここできちんとコピーできていない可能性があります。</font>

![スクリーンショット 2021-02-14 10.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/fee3b80d-d76e-78ba-855c-98d70063f090.png)


⑥ 『swiper-bundle.min.css』と『swiper-bundle.min.js』のそれぞれのファイル分を新規作成し、作成したファイルにコピーしたソースコードをファイル毎に分けて貼り付けます。
<font color="gray">※ 好みによりますが、CSSはCSS、JSはJSと種別毎にフォルダを作成して分けると見やすくなり、
今後ファイルが増えてもメンテナンスしやすくなります。</font>

![スクリーンショット 2021-02-12 14.32.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/cb128f9a-d02b-c4cf-a50a-6f696c8f504c.png)

⑦ 公式サイトより、少し戻って左サイドバーから『Add Swiper HTML Layout』をクリックし、表示されているソースコードを自身のHTMLファイルとCSSファイルに貼り付けます。

![スクリーンショット 2021-02-12 15.18.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/dc906714-68a6-150f-1d18-31d2972967e2.png)

⑧ 左サイドバーから『Initialize Swiper』をクリックし、表示されているソースコードを自身のJSファイルに貼り付けます。

![スクリーンショット 2021-02-12 15.24.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/81b60336-ebf5-1607-87a8-88922c0a558d.png)


⑨ htmlファイルを以下の例を参考に、ファイルの場所を考慮し自身の環境に合うよう編集します。
<font color="gray">※ reset.cssから読み込むようにし、最後に自分が書いたCSSを読み込むようにします。
※ scriptタグにdefer属性をつけることで、HTMLの読み込み後に実行し、複数ある場合は上から順番に読み込まれます。</font>

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/style.min.css">
  <script src="js/swiper-bundle.min.js" defer></script>
  <script src="js/script.js" defer></script>
</head>

<body>
  <!-- Slider main container -->
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
</body>

</html>
```

## 完成例

簡易ではありますが、スライダーアニメーションを実装できました。

![v2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/f3a24e13-0980-7492-e35c-02c80793fc50.gif)

```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.min.css">
  <script src="js/swiper-bundle.min.js" defer></script>
  <script src="js/script.js" defer></script>
</head>

<body>
  <!-- Slider main container -->
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide pic1">
      </div>
      <div class="swiper-slide pic2">
      </div>
      <div class="swiper-slide pic3">
      </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
</body>

</html>
```

```scss:style.scss
@mixin swp {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.swiper-container {
  width: 100%;
  height: 100vh;
  .swiper-wrapper {
    .swiper-slide {
    }
    .swiper-slide.pic1 {
      background: url("../pic/picture1.jpg");
      @include swp;
    }
    .swiper-slide.pic2 {
      background: url("../pic/picture2.jpeg");
      @include swp;
    }
    .swiper-slide.pic3 {
      background: url("../pic/picture3.jpg");
      @include swp;
    }
  }
}
```

```javascript:script.js
const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  speed: 500,
  slidesPerView: 3,
  centeredSlides: true,
  spaceBetween: 10,

   autoplay: {
     delay: 2000
   },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});
```

## コンソールに警告が表示された場合

.mapと呼ばれるソースマップファイルがないですと警告されています。

![スクリーンショット 2021-02-12 15.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/7c491117-0c91-3d59-975b-05dd4993482f.png)

警告されていても、動作には問題ありませんが、swiper-bundle.min.jsファイルの最後の行を消すと
警告は表示されなくなります。

![スクリーンショット 2021-02-12 16.04.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/4e98d634-e2dd-1c37-15d6-bf6e169fe69b.png)

## 関連記事

[Swiperを使ってスライダーアニメーションを実装する〜使い方編〜](https://qiita.com/s79ns/items/dc35b526296351e93b3e)