【 jQuery】Swiperでスライダーを実装する方法

## はじめに
スライダーを実装するプラグインの中でおすすめのSwiperの使い方について記事にしていきます

## Swiperについて
スライダーを実装できるJavaScriptのプラグインです。jQueryに依存しない高機能スライダーで、動作が軽いのが特徴です。

https://swiperjs.com/

Swiperには、次の3つの導入方法があります。
- ファイルをダウンロードして読み込む
- CDN（Content Delivery Network）を利用して読み込む
- npm（Node Package Manager）を使用して読み込む﻿

この記事では、ファイルをダウンロードして読み込む方法やカスタマイズの方法について書いていきます。

それではやっていましょう！！

## 1.ファイルをダウンロード

### 1. Get Startedをクリック

![スクリーンショット 2024-04-11 18.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/ffdcf184-b06f-c435-8b89-91ae583803c8.png)

### 2. Download assetsにあるURLをクリック

![スクリーンショット 2024-04-11 18.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/35902f78-3027-52f4-5381-f8b7b3f07dd6.png)

### 3. 赤枠で囲ってあるアイコンをクリックするとzipファイルをダウンロードできます

![スクリーンショット 2024-04-11 18.28.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/fa9286d8-d72b-9e0f-83eb-77cf6bee4a25.png)

## 2.ファイルをフォルダに入れる

### 1. ダウンロードしたファイルを解凍する

### 2. 必要なファイルを使いたいフォルダに入れる
cssフォルダに"swiper-bundle.css"か"swiper-bundle.min.css"
jsフォルダに"swiper-bundle.js"か"swiper-bundle.min.js"
を、入れる

:::note info
**min** はありもなしも動きとしては同じで、どのように記述されているかの違いです
<dl>
  <dt>minあり</dt>
  <dd>PC向けに記述されていて解読するのが難しく、編集できない</dd>
  <dt>minなし</dt>
  <dd>人向けに解読できるよう記述されているので、編集できる</dd>
</dl>
:::

![スクリーンショット 2024-04-11 20.56.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/43f08466-a4cf-50e8-2f59-287f67c28a3f.png)


## 3.コーディング

### 1. cssファイルを読み込む

```html:index.html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトル</title>

  <link rel="stylesheet" href="css/reset.css">
    <!--reset.cssの後、style.cssより前にswiperを読み込ませる-->
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
```

### 2. jsファイルを読み込む
```html:index.html
<body>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!--jqueryの後、main.jsより前にswiperを読み込ませる-->
  <script src="js/swiper-bundle.js"></script>
  <script src="js/main.js"></script>
</body>
```

### 3. HTMLを記述

赤枠で囲われているコードをコピペする
Swiperの、基本となるコードです！

![スクリーンショット 2024-04-11 21.21.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/4107f8a9-c806-5c37-725d-e962d2f13eae.png)

### ４. CSSを記述

style.cssに、このCSSコードもコピペしましょう

![スクリーンショット 2024-04-11 21.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/cb98fa34-2157-e134-fdd6-01abbbe69bbe.png)

### ４. scriptを記述

main.jsに、このscriptコードもコピペしましょう

![スクリーンショット 2024-04-11 21.32.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/e319019a-a632-881e-0132-808db136d4b1.png)

これでswiperを使う準備が整いました
あとは自由にカスタマイズしていきましょう！


## カスタマイズ
 
１→２の順でクリック

![スクリーンショット 2024-04-11 21.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/2c925a8c-539c-3782-1896-6dad4177bb01.png)

遷移したら下にスクロールしていくと、Parametersがあります
これがカスタマイズ一覧になります

![スクリーンショット 2024-04-11 21.48.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/f55e4f84-1523-c4f9-ce4e-7d72ef69a65e.png)

例えば自動でスライダーをスクロールしたい場合
文字検索で"autoplay"とすると下記のように記述されていると思います

![スクリーンショット 2024-04-11 21.55.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2459296/49c0107d-7eb0-e2cc-d4ab-2754f2140d42.png)

赤枠の右下にあるコードを追加すればカスタマイズできます

```javascript:main.js
const swiper = new Swiper('.swiper', {
 //　ここから
 autoplay: {
   delay: 5000,
 },
 //　ここまで
});
```

紹介しきれないほどたくさんのカスタマイズがあるので、色々試してみてみましょう！！


## さいごに

よく使うカスタマイズがあれば追加していきます