【swiper.js v8】サムネイル付きスライダーの実装(サムネイル固定、Vanilla JS)

[ ID : 5818 ]
シルバー
【swiper.js v8】サムネイル付きスライダーの実装(サムネイル固定、Vanilla JS)
実装目安
3分

概要

【Vanilla JS】swiper.js(バージョン8系)を使用して、メインスライダーと固定のサムネイル画像が連動するスライダーの実装方法を紹介。

用途・要件

  • サムネイル画像は固定。
  • DEMOでは画像にimgタグを使用。
  • 表示中のサムネイルにカレントクラスを付与。
  • 注)IE11非対応。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

その他

  • swiper v8.1.4。
  • JavaScriptのみで実装。(jQuery不使用)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録