【簡単】JavaScriptライブラリで、スライダー機能を作ってみた

ライブラリ紹介

今回紹介するライブラリは下記の2つです。
・Swiper.js
・Splide.js

Swiper

公式サイト：https://swiperjs.com/

導入(CDN)

下記のCDNをHTMLのの内に入れる

デモ(デフォルト)

簡単にスライダー機能が追加できました。

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のの内に入れる

デモ(デフォルト)

簡単にスライダー機能が追加できました。

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/

＼弊社では一緒に働いてくれる仲間を募集しております／

エントリーはこちらから▼