jQueryでスライダーを自作する方法をサンプルコード付き解説！
WEBサイトのトップページなどので見かける機会の多い、スライドショー。そんなスライドショーを自作できるようになることで、自分なりにカスタマイズもできるようにもなります。この記事ではjQueryでスライダーを自作する方法を解説していきます。
jQueryでスライダーを自作したい
WEBサイトの訪問した際にトップページなどに画像のスライドショーを見かけたり、コンテンツをスライドショー形式で表示させているのを見たことをある人も多いのではないでしょうか？
WEBサイトにスライダーを導入することでデザインがかっこよくなったり、スペースの省エネが図れたりなどのメリットが得られます。
スライダーを実装するにあたって、プラグインを利用するというのも１つの方法です。
プラグインを利用することで簡単にスライダーが実装できるのがメリットです。が、その反面プラグインの制約に準じたものしか実装することができないのがデメリットです。
「もっとこうしたい！」や「自分なりにカスタマイズしたい！」などが出てきたときに、スライダーを自作する必要も出てくると思います。
ここではプラグイン不要で、シンプルな自作スライダーの作り方を解説していきます。
jQueryでスライダーを自作する方法
それでは、早速スライダーを自作する方法を解説していきます。
スライドショーを用意
最初に画像をスライドショーとして表示させる部分をコーディングしていきます。
また、お好きな画像を複数枚用意してください。
index.html
<!-- スライドショー -->
<div class="slides">
<div class="slide active">
<h2>スライドショー1</h2>
<div class="img">
<img src="好きな画像1" alt="スライドショー1の画像">
</div>
</div>
<div class="slide">
<h2>スライドショー2</h2>
<div class="img">
<img src="好きな画像2" alt="スライドショー2の画像">
</div>
</div>
<div class="slide">
<h2>スライドショー3</h2>
<div class="img">
<img src="好きな画像3" alt="スライドショー3の画像">
</div>
</div>
</div><!-- .slides -->index.css
/* スライドショー */
.slides{
padding: 10px 0;
}
.slide{
display: none;
}
.slide h2{
font-size: 16px;
margin-bottom: 12px;
}
.slide .img{
height: 200px;
padding: 12px;
overflow: hidden;
}
.slide .img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.active{
display: block;
}スライダーとして表示していきたい部分を.slideクラスでグループ化しています。また、最初に表示させておきたいスライドに.activeクラスを与えています。
スライダーを制御するボタンを用意
次に、表示させるスライドの制御を行うボタンの見た目の部分をコーディングしていきます。
index.html
<!-- ボタン -->
<div class="buttons">
<div class="button prev">Prev</div>
<div class="button next">Next</div>
</div><!-- .buttons -->index.css
/* ボタン */
.buttons{
overflow: hidden;
}
.button{
display: inline-block;
padding: 5px 10px;
border-radius: 8px;
background-color: #EA5252;
color: white;
text-align: center;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.prev{
float: left;
}
.next{
float: right;
}ここでは見た目の部分をコーディングしただけなので、今はクリックしてもまだ何も起きません。
jQueryでスライダー機能の実装
見た目の部分のコーディングが完了したので、jQueryで実際の機能の部分を実装していきたいと思います。
index.js
// ボタンの変化処理
function changeButtons(){
// 現在表示中のスライドのナンバーを取得
let activeSlideNum = $('.slide').index($('.active'));
// 両ボタンを表示
$('.button').show();
// 最初のスライドの場合、Prevボタン非表示
if(activeSlideNum == 0){
$('.prev').hide();
}else if(activeSlideNum == $('.slide').length - 1){ // 最後のスライドの場合、Nextボタン非表示
$('.next').hide();
}
}
// ボタンの変化処理の実行
changeButtons();まずはスライドを前へ戻す「Prevボタン」とスライドを次へ進める「Nextボタン」の表示状態を変化させるchangeButtons関数を作成します。
.slideクラスの要素の中から.activeクラスが付いている要素のインデックス番号を取得し、変数activeSlideNumに代入しておきます。
また、初期状態として両方のボタンを表示しておきます。
その後、if文で取得したインデックス番号(activeSlideNum)が最初の場合は「Prevボタン」を非表示にして、最後の場合は「Nextボタン」を非表示します。
後にこの関数をボタンが押されるたびに実行します。
また、最初に表示した場合も、この関数が実行されるように忘れずに記述しましょう。
index.js
// Nextボタンクリックイベント
$('.next').click(function(){
// 現在表示中のスライドの要素を取得
let $activeSlide = $('.active');
// 現在表示中のスライドを非表示にする
$activeSlide.removeClass('active');
// 次のスライドを表示する
$activeSlide.next().addClass('active');
// ボタンの変化処理の実行
changeButtons();
});
// Prevボタンクリックイベント
$('.prev').click(function(){
// 現在表示中のスライドの要素を取得
let $activeSlide = $('.active');
// 現在表示中のスライドを非表示にする
$activeSlide.removeClass('active');
// 前のスライドを表示する
$activeSlide.prev().addClass('active');
// ボタンの変化処理の実行
changeButtons();
});最後にボタンがクリックされた際にスライドが変化する処理を実装していきます。
処理の流れは、
①.activeクラスが付いている現在表示中のスライド要素を取得する。
②現在表示中のスライド要素から.activeクラスを削除する。
③Nextボタンの場合、次の要素に.activeクラスを与えスライドを表示する。
Prevボタンの場合、前の要素に.activeクラスを与えスライドを表示する。
④changeButtons関数を実行し、ボタンの状態を変化させる。
上記の流れでスライダーを実装することができました。
まとめ
今回、jQueryでスライダーを自作する方法を解説してきました。自作したサンプルコードをカスタマイズすることで、自動再生やループ、アニメーションを付けるなど自分なりにカスタマイズすることができます。ぜひ、参考にして自分なりのスライダーを作成してみてください。
