Swiper.jsとは？

Swiper.js(スワイパー)とは、スライダーが簡単に作成できるJacaScriptのライブラリです。
レスポンシブ対応が簡単にできてjQueryも使う必要がないため人気のライブラリとなっています。

Swiper.jsのメリット

jQueryが不要
レスポンシブ対応しており、スマホイベントも使用可能
オプションやコールバック関数が充実しているためカスタマイズ性に富み、デザインの良いスライダーができる

Swiper.jsのデメリット

古いブラウザに対応していない
Swiper.jsのバージョンが5.0以降はInternet Explorerに対応していない

Swiper.jsのダウンロード

今回はCDNを読み込んでダウンロードしていこうと思います。
npmを使ってもインストールできます。

公式サイトより最新のCDNを読み込んでください。
https://swiperjs.com/get-started#use-swiper-from-cdn

linkタグはhead内に、scriptタグはbodytoj直後に記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <title>Swiperテスト</title>
</head>

<body>
//内容がはいります
</body>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</html>

HTMLの記述

swiper-container > swiper-wrapper > swiper-slideといった構造で記述するとスライドできるようになります。
ページネーションやナビゲーションボタン、スクロールバーはオプションになるので必要に応じて記述してください。

<body>
    <!-- スライダー全体をまとめる div要素 -->
    <div class="swiper-container">
        <!-- スライドをまとめる div要素 -->
        <div class="swiper-wrapper">
            <!-- それぞれのスライドを囲む div要素 -->
            <div class="swiper-slide">
                <p>いちご</p>
                <img src="" alt="" width="300">
            </div>
            <div class="swiper-slide">
                <p>りんご</p>
                <img src="" alt="" width="300">
            </div>
            <div class="swiper-slide">
                <p>もも</p>
                <img src="" alt="" width="300">
            </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>

</body>

CSSの記述

スライダーの大きさを指定します。
他にもつけたいCSSがあれば追記してください。

 .swiper-container {
   width: 600px;
   height: 600px;
}

参考

スライダープラグイン Swiper（v5/v6）の使い方
 スライダーSwiper.js 基本の使い方解説
 Swiper.jsの使い方「レスポンシブ等の具体例」とオプション解説
 Getting Started With Swiper

Swiper.jsを使うメリットと基本の使い方