【簡単】JavaScriptライブラリで、スライダー機能を作ってみた
ライブラリ紹介
今回紹介するライブラリは下記の2つです。
・Swiper.js
・Splide.js
Swiper
公式サイト：https://swiperjs.com/
導入(CDN)
下記のCDNをHTMLの<head>の内に入れる
<link rel=”stylesheet” href=”https://unpkg.com/swiper@8/swiper-bundle.min.css” />
<script src=”https://unpkg.com/swiper@8/swiper-bundle.min.js”></script>
デモ(デフォルト)
簡単にスライダー機能が追加できました。
See the Pen Untitled by miya (@ya-mimi) on CodePen.
デモ(自動再生)
自動でスライド機能が再生されます。
See the Pen 自動再生 by miya (@ya-mimi) on CodePen.
Splide
公式サイト：https://splidejs.com/
導入(CDN)
下記のCDNをHTMLの<head>の内に入れる
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css”>
<script src=”https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-grid@latest/dist/js/splide-extension-grid.min.js”></script>
デモ(デフォルト)
簡単にスライダー機能が追加できました。
See the Pen Untitled by miya (@ya-mimi) on CodePen.
デモ(画像とテキストを一緒に表示)
1ページに2枚画像とテキストを表示しています。
(0.5xで表示するとわかりやすいです。)
See the Pen Untitled by miya (@ya-mimi) on CodePen.
サムネイルスライダー
サムネイルをクリックするとメインの画像が切り替わるスライダーです。
See the Pen Untitled by miya (@ya-mimi) on CodePen.
まとめ
ライブラリを使用して、簡単にスライダー機能の追加できました。いろんなオプションを活用してみてください。
おまけ
今回使用したフリー画像：https://o-dan.net/ja/
＼弊社では一緒に働いてくれる仲間を募集しております／
エントリーはこちらから▼
