jQueryと各種プラグインの読み込み方法

大体の流れは下記記事を参考にすると良し。

【jQueryの基本の"き"】パート1 - jQueryプラグインの使い方 - 無駄と文化

jQueryの読み込み

①下記公式サイトからjQueryのCDNを入手し、HTMLの</body>の前に貼る。

jQuery CDN

非圧縮、縮小、スリム、スリム縮小の違いは下記の「jQueryのソースコードの種類」を参照のこと。

CDNからjQueryファイルを読み込む方法【初心者向け】

例）
```
<body>
・
・
・

    <script src="<https://code.jquery.com/jquery-3.5.1.js>"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</body>
```

プラグインの読み込み

①各種入れたいプラグインのCDNを公式サイトから入手し、CSSは<head></head>内に、jsは<body></body>内に貼り付ける。

※自作CSS・jsはそれぞれ最後に貼っておくこと。（そうすればアレンジしたい時自作ファイルに書いて上書きすることが出来る）

例）

<head>
    <meta charset="UTF-8">
			・
			・
			・
		<!--==  Swiperプラグインのcss  ==-->
    <link rel="stylesheet" href="<https://unpkg.com/swiper/swiper-bundle.min.css>">
    <!--==  CSS  ==-->
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
			・
			・
			・
		<!--==  jQuery本体読み込み  ==-->
    <script src="<https://code.jquery.com/jquery-3.5.1.js>"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <!--==  Swiperプラグインのjs  ==-->
    <script src="<https://unpkg.com/swiper/swiper-bundle.min.js>"></script>
    <!--==  JS  ==-->
    <script type="text/javascript" src="./js/style.js"></script>
</body>

デモを見つつ大まかに実装したいものを探してコピペ

①プラグインの公式サイトにデモがあるはずなのでそれを開く

②実装したいものに近いデモを探し、ソースコードを自分の各ファイルにコピペする
オリジナルに編集

①html、css、jsそれぞれを自由に編集して実装したいものを作り上げる。jsに関しては公式サイトに「これをやると〜〜なりますよ〜」って説明があったりするからそれを見つつ実装してみよう！

🌸スライダーならこの記事も実装例が載ってて参考になるかも。

Web Design Leaves

Swiperを使用した基本的なスライダー実装から応用まで！実用的な6つのサンプル | WEB改善事例集(GMOソリューションパートナー株式会社)