システム・サーバー
2022.07.08

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

ライブラリ紹介

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

Swiper

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

導入(CDN)

下記のCDNをHTMLの<head>の内に入れる

<link rel=”stylesheet” href=”https://unpkg.com/[email protected]/swiper-bundle.min.css” />
<script src=”https://unpkg.com/[email protected]/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/[email protected]/dist/css/splide.min.css”>
<script src=”https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/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/

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

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

この記事を書いた人

宮城
宮城

この記事をシェアする

Service

クライマーで提供しているサービス

お問い合わせは、
こちらから
お気軽にどうぞ。

Please feel free to ask me.