jQuery のいらないレスポンシブ対応の画像スライダープラグイン。
Swiperです。

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

まずは読み込みの設定

公式でもCDNを書いてくれていてありがたいです。

CSSとJSファイルを読み込みますよ。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

スライドさせたい画像のHTML

<!-- スライダーの大枠 -->
<div class="swiper-container">
    <!-- スライド用の枠 -->
    <div class="swiper-wrapper">
        <!-- スライドさせたい画像（複数可） -->
        <div class="swiper-slide"><img src="image01.jpg" alt="example01"></div>
        <div class="swiper-slide"><img src="image02.jpg" alt="example02"></div>
        <div class="swiper-slide"><img src="image03.jpg" alt="example03"></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>

そして画像を動かす

<script>
var mySwiper = new Swiper('.swiper-container', {
  // オプション
  direction: 'vertical',
  loop: true,

  // ページネーションを使う時の記述
  pagination: {
    el: '.swiper-pagination',
  },

  // 左右の戻る・進むボタンを使う時の記述
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // スクロールバーが欲しい時の記述
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})
</script>

以上さっくりとメモしました。
スライダーを動かすようにした後はCSSの調整が必要になります。

小さなサムネイル画像を拡大して表示させることができ、ちょっとしたスライドショーにもなるので大変重宝していました。
初めて実装した時は導入の簡単さと視覚効果のインパクトに感動したものです。

このプラグインの使い方は大変簡単なのですが、最近使う機会がありちょこちょこ調べていたので備忘録として残します。

正直、久々に使うまでオプションがあることを知りませんでした。。

Lightbox2

Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

lokeshdhakar.com

まずは読み込みの設定

lightbox2 - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works o...

cdnjs.com

動作確認の時にはcdnが便利！
今までにjquery.jsを読み込んでいたcdnサーバが何度か落ちたことがあり、慌ててサーバにファイルをアップした記憶があります。
速度をとるか安定をとるか…これは臨機応変に対応ですね。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous"></script>

こんな感じでCSSとJSファイルを読み込みます。
※jQueryも必要です！

jQueryも含めると下記の記述になります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous"></script>

拡大したい画像の設定

<a href="image.jpg" data-lightbox="example01" data-title="画像タイトル">
  <img src="thumb_image.jpg" alt="サムネイル画像">
</a>

1つの画像を拡大したい時はこれだけです。
画像をaタグで囲んで「href」に表示させたい画像のパスを入れ、「data-lightbox」を追加するだけ。
サムネイル用の小さい画像と、拡大表示させる大きい画像の2種類を用意するのがページ読み込み時の負荷も少なく良いですね。
タイトルを付けたい時は「data-title」をaタグに追加すれば付けられます。

次はいくつかのまとまったギャラリーを読み込むとき（グループ化）です。

<a href="image01.jpg" data-lightbox="group01">
  <img src="thumb_image01.jpg" alt="サムネイル画像01">
</a>
<a href="image02.jpg" data-lightbox="group01">
  <img src="thumb_image02.jpg" alt="サムネイル画像02">
</a>
<a href="image03.jpg" data-lightbox="group01">
  <img src="thumb_image03.jpg" alt="サムネイル画像03">
</a>

はい。
同じグループにしたい画像の「data-lightbox」を同じ名前にするだけでまとまってスライドショーが出来るようになるのです。
簡単です！

そしてオプション

なかなかオプションまで使わずとも十分な効果があるので良いのですが、
グループのスライドショーをループにしたい時があったりします。

<script>
    lightbox.option({
      'wrapAround': true
    })
</script>

そんな時は、オプションメソッドを呼び出すだけで設定可能です。
上の記述でスライドショーがループするようになります。

久々に使ってみても簡単に実装できて良いです！
サムネイル画像を予め表示させることでページの軽量化もできるので使うシチュエーションもまだまだありそうです。

これでMIT Licenseというのもとてつもなく感謝です。