swiper.jsというライブラリを使用

swiper.jsへのリンクを追加することで、追加ファイルはなしで実装する

※ 更新　現在はsplide.js を使用することにした(swiper.jsの動作が重く感じたため)

ベーシックなスライドの実装イメージ

オートでスライドしていき、左右の青い矢印を押すことで画像を進めたり戻すこともできる。 最後までいくとループして先頭に戻る仕様になっている。

実装するための手順

  1. HTMLのheadタグ内にswipeへのリンクを記述
  2. スライダーの骨組みをHTMLに記述
  3. jsファイルへのリンクをHTMLの</body>の直前に記述
  4. CSSを適用してスライダーの表示を整える
  5. jsファイルを編集して、スライダーの表示と設定をする

１．HTMLのheadタグ内にswipeへのリンクを記述

下の2行をコピペして使用する。バージョンは2025年1月において最新のもの。

コピペ用

    <!-- swiper CDNへのリンク -->
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" />
    <script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script>

記述は<head>タグ内へ書くこと、自分で指定しているstyle.cssの行より下に記述することを推奨。

２．スライダーの骨組みをHTMLに記述