【JS】アローボタン付きスライダー

JavaScript
動点P
動点P

スライダーを付けたいけどjQueryとかに頼りたくない！

動点Qちゃん
動点Qちゃん

ではJavaScriptで動くスライダーを考えましょう・・・

というわけで勉強のためにスライダーを自作しようと思いいろいろなスライダーを見てみたのですが、下記のページのスライダーがとても参考になりましたので、この構造をベースにして作ってみました。

参考リンク【JavaScript】スライダーを自作 arrow編ーWEB制作・開発者の記録

See the Pen carousel-demo by inu (@tenp) on CodePen.

ほぼ構造はまんまですが、ホバーで拡大するのと、アローボタンを外に出してみたりとか変更しています。

あとIE対応のためforEach文をfor文に変更しています。基本的な構造は元の製作者の方が説明しているので、自分の勉強と健忘録のため難しかったところやコードを変更したところをメインに解説していきます。

スライダーの構造の全体

スライダーが動く仕組みですが、まず要素を何個見えている状態にするか決めます。今回は3個にしました。その3つはCSSのdisplayのプロパティで見える設定にする（クラスをつける）、それ以外は見えないよう設定しておきます。戻るボタンと次へボタンによって見える設定のクラスとつけたりとったりしながら動かしています。

要素に番号をつける

スライダーで流れてくる要素を操作したりどの位置のものか把握しておきたいので、全ての要素に番号を付けます。

まず要素を取得しておく。

const slider_list = document.querySelector(".slider_list");
const slider_items = document.querySelectorAll(".slider_item");
const next_button = document.getElementById("next");
const prev_button = document.getElementById("prev");

全てのスライダー要素にslider-indexという番号をつけます。

function set_index(){
	for(let l=0;l<slider_items.length;l++){
		slider_items[l].setAttribute("slider-index", [l]);
		 l >= 0 && l < 3 ? slider_items[l].classList.add( 'slide_area' ) : false;
     prev_button.classList.add( 'disable' );	// 最初の位置のときは戻るボタンは使えなくする
	}
}

このとき0,1,2の位置のものにはslide_areaクラスをつけて見えるようにしています。これがスライダーで見えるエリアにある要素ということです。

それから初期位置のときは左に何もないはずなので「戻る」ボタンを使えなくしておきます。

set_index();

関数を定義しただけになっているので実行します。参考にしたものではpromiseを呼び出しているのですが、正直promise.resolveがよくわからなかったので使えませんでした。set_index処理をさせてからアローボタン処理に移った方がいいのは確かですが、とりあえずただの実行でも機能は動いています…。promiseは今後きちんと勉強します。

次へボタン、戻るボタンの操作

「次へ」、「戻る」のアローボタンを押したときに何が起こるかですが、「戻る」ボタンを例に図示しました。

コードとそれぞれの説明です。

function prev_slide(){
	next_button.classList.remove("disable");// 次へボタンを使えるようにする
	const current_items = document.querySelectorAll(".slide_area");// スライダーエリアにある要素取得
	const first = slider_list.firstElementChild.getAttribute( 'slider-index' );//最初の要素の番号を取得、0
	for(let n=0;n<current_items.length;n++){
		if( n=== 0){
			const prev_element = current_items[n].previousElementSibling;//一つ前の要素をprev_elementにした

			const first_current = Number(current_items[n].getAttribute("slider-index"))-1;
　　　//スライダーエリア0の位置の要素のindex番号から１を引いたものをfirst_currentに定義
			Number( first ) === first_current ? prev_button.classList.add( 'disable' ) : false;
　　　//スライダーエリア0の位置の前の要素のindex番号が最初の要素だったら、前へボタンは使えなくする
			prev_element.classList.add("slide_area");//一つ前の要素をにスライドエリアクラスをつけて見えるようにした
		}
		n === 2 ? current_items[n].classList.remove('slide_area') :false;
　　//スライドエリアの２の位置にある要素はスライドエリアクラスを外して見えないようにする
	};
}

これは「次へ」ボタンのときもほぼ同じ仕組みで、スライドエリアの0の位置にある要素が次は外れる要素、次にスライドエリアに入る要素にスライドエリアクラスを付けたり外したりして制御します。

あとはもうこれ以上要素がないときはボタンを使えなくすることが大事ですね。

一応「次へ」ボタンとボタンイベントのコードを載せておきます。全体像はCodePenを見てください。


function next_slide(){
	prev_button.classList.remove("disable");
	const current_items = document.querySelectorAll(".slide_area");
	const last = slider_list.lastElementChild.getAttribute("slider-index");
	for(let m=0;m<current_items.length;m++){
		if( m === 0){			current_items[m].classList.remove("slide_area")};
		if( m === 2){
			const next = current_items[m].nextElementSibling;
			const last_current = Number(current_items[m].getAttribute("slider-index"))+1;
			next.classList.add("slide_area");
				 Number( last ) === last_current ? next_button.classList.add( 'disable' ) : false;
		};		
	}
}

// イベント処理
next_button.addEventListener('click', function(){next_slide();});
prev_button.addEventListener('click', function(){prev_slide();});

スライダーって地味に見えますけど、JavaScriptで動かそうとするとかなり大変でした。for文で要素を回して処理をさせようとするんですが、要素がとれてないとclassListのエラーが出てきたり。

最近本当にJavaScriptを原理からちゃんと勉強しないとわからないなと思い始めています。

追記

※2025年現在、言いたいことは、とにかくライブラリに頼れってことです。

カスタムスライダーを作るよりもSwiperなどのライブラリを使うべき理由

自前でスライダーを作ることは、JavaScriptの理解を深めたり、細かい動作をカスタマイズしたい場合には有用ですが、基本的にはSwiperなどの既存のライブラリを使う方が楽で効率的です。以下の理由から、できるだけ既存のツールを活用することをおすすめします。

1. ライブラリを使うメリット

✅ 開発の手間が減る → スライダーの基本機能（スワイプ、ページネーション、ループなど）がすぐに使える
✅ ブラウザ対応が楽 → CSSやJSでのバグ対応を考える必要が少ない
✅ アクセシビリティが考慮されている → キーボード操作やスクリーンリーダー対応が組み込まれている
✅ 高機能なオプションが豊富 → 自前で実装するのが大変な機能も簡単に追加できる

特にスマホやタッチ操作を考慮したスライダーを作る場合、ネイティブのスワイプ処理をしっかり実装するのは難しいため、Swiperのようなツールを使うのが最適です。

アクセシビリティの面も重要で、経験の浅い人間が作ってしまうと、目が見えない方にとって不便で使いづらいサイトを作ってしまっていることになりがちです。

みんなのために、すなおにライブラリを使おう！！

おすすめライブラリSlickとSwiperの紹介：どちらを選ぶべきか？

スライダーを実装する際、人気のあるライブラリとして Swiper と Slick があります。どちらも優れたツールですが、それぞれ特徴があるので用途に合わせて選ぶのがベストです。

🔹 Swiper（おすすめ！）

✅ 軽量かつ高機能 → モダンなスライダーを簡単に実装できる
✅ タッチ操作に最適化 → スワイプの挙動がスムーズ
✅ React, Vue, Angularに対応 → フロントエンドの最新技術と相性が良い
✅ メンテナンスが活発 → 定期的にアップデートされている
✅ 柔軟なカスタマイズ → ループ、オートプレイ、ページネーション、ナビゲーションなど

🟢 Swiperはこんな人におすすめ！

  • モダンなスライダーを使いたい人
  • タッチデバイス対応が必須な人（スマホサイトでスワイプ可能にしたい）
  • ReactやVueなどのフレームワークで使いたい人

🔹 Slick（jQueryユーザー向け）

✅ jQueryベース → jQueryプロジェクトに組み込みやすい
✅ シンプルでわかりやすい → 設定が少なく簡単に導入できる
✅ レスポンシブ対応が簡単
✅ カスタマイズが豊富（スライド数調整、ドットナビなど）

🟢 Slickはこんな人におすすめ！

  • jQueryを使っているプロジェクトでスライダーを追加したい人
  • 軽量でシンプルなスライダーをすぐに導入したい人
  • 古いブラウザでも動かしたい人（Swiperより対応範囲が広い）

Swiper vs. Slick 比較表

項目SwiperSlick
軽量性⭐⭐⭐⭐（軽量）⭐⭐⭐（やや重い）
タッチ操作⭐⭐⭐⭐⭐（スムーズ）⭐⭐⭐（サポートはあるがややカクつく）
jQuery依存❌（なし）✅（あり）
カスタマイズ性⭐⭐⭐⭐⭐（多機能で柔軟）⭐⭐⭐⭐（十分なカスタマイズ可）
フレームワーク対応✅（React, Vue, Angular対応）❌（jQueryのみ）
メンテナンス状況✅（活発に開発中）⚠️（更新が遅め）
導入の簡単さ⭐⭐⭐⭐（やや設定が多い）⭐⭐⭐⭐⭐（簡単）

どっちを選ぶべき？

あなたの状況おすすめのスライダー
モダンなスライダーを導入したい Swiper
jQueryを使っているサイトに追加したい Slick
スマホでのスワイプ対応を重視 Swiper
シンプルにスライダーを実装したい Slick

→ これから新規でスライダーを作るなら、圧倒的に Swiper をおすすめ！
→ 既存の jQuery プロジェクトなら、Slick が手っ取り早い！

どちらを選ぶかは プロジェクトの技術スタック によるので、自分に合った方を選びましょう！

コメント