前回の記事ではスライドごとにフェードイン,フェードアウトを繰り返すだけのスライドショーを作りました.これでも,スライドショーとしては機能するのですが,なにか物足りないですよね?前後のスライドに進むボタンや,現在のスライドの位置,一定時間ごとの自動スライド等があった方がおしゃれで,機能的ですよね.今回は高機能なスライドショーを作っていきます.
実装する機能は以下の3つになります.
- 前後へのスライドボタン
- 一定経過時間での自動スライド
- マウスオーバー時の自動スライド停止
- 現在のスライドを示すインジケーターの実装
スライドショーの動作原理
このスライドショーのイメージは映画のフィルムのような振る舞いをします.
映画のフィルムで言うところのスクリーとなる部分は青色の点線で囲ったid=slide-showの要素になり,{position:relative}を指定します.スクリーンは左右に動かないため,relativeを設定しています.
フイルム部分はclass=slide-itemsの要素となります.この要素には{position:absolute}を指定し,jQueryでleftプロパティーを変更することで,左右に動かします.
実際にスクリーンに投影される写真の部分は,{position:absolute}を指定し,横一列に並べます.
前回のスライドショーでは写真がフェードイン,フェードアウトを繰り返すような仕組みでしたが,今回のスライドショーはスライドインしてくるようなスライドショーになります.では,コードを見ていきましょう!構成ファイルは以下の通りです.
HTML
<div id="slide-show">
<div class="slide-items">
<a href="#" class="slide"><img src="./img/cake.jpg" alt="" ></a>
<a href="#" class="slide"><img src="./img/interior.jpg" alt=""></a>
<a href="#" class="slide"><img src="./img/desk.jpg" alt=""></a>
<a href="#" class="slide"><img src="./img/lunch.jpg" alt=""></a>
</div>
<div class="slide-nav">
<a href="#" class="prev sample"></a>
<a href="#" class="next"></a>
</div>
<div class="slide-indicator"></div>
</div>
スクリーンとなるid=”slide-show”要素の中に,フィルムとなるclass=”slide-items”要素,その中に写真class=”slide”が格納されています.また前後への移動に使用するナビゲーションボタンと現在のスライド場所を示す,インジケーター要素も作っています.インジケーターの中身はjQueryで作成します.
SCSS(CSS)
#slide-show {
position: relative;
height: 70vh;
overflow: hidden;
.slide-items {
height: 100%;
width: 100%;
position: absolute;
.slide {
position: absolute;
height: 100%;
width: 100%;
img {
width: 100%;
height: 70vh;
object-fit: cover;
}
}
}
.slide-nav {
position: absolute;
display: inline-block;
width: 100%;
height: auto;
top: 50%;
a {
position: absolute;
width: 50px;
height: 50px;
opacity: 0.5;
}
.prev {
border-top: solid 15px #696969;
border-left: solid 15px #696969;
top: 0;
left: 30px;
transform: rotate(-45deg);
transform-origin: left top;
}
.next {
border-top: solid 15px #696969;
border-right: solid 15px #696969;
top: 0;
right: 30px;
transform: rotate(45deg);
transform-origin: right top;
}
.disabled {
display: none;
}
}
.slide-indicator {
bottom: 30px;
height: 16px;
position: absolute;
left: 0;
right: 0;
text-align: center;
a {
display: inline-block;
background-color: #696969;
opacity: 0.5;
border-radius: 8px;
width: 16px;
height: 16px;
margin: 0px 5px;
}
.active {
background-color: aqua;
}
}
}
少し長いですが,ボックスのサイズ調整や,レイアウトの構成なんかも設定しているので長めになっています.コピペで使用するときは,いろいろアレンジしてみてください.少し詳しく説明します.
#slide-showにはかなず{position:relative}を設定しましょう.その子要素にはすべて,{position:absolute}を指定します.親要素より子要素の方が横幅が長くなってしまうので,{overflow: hidden}を指定して,あふれている要素については隠しておきましょう.
.disabledは前後へのインジケーターが必要ない場合(一番初めのスライドの場合「prevボタン」,一番最後のスライドの場合「nextボタン」が必要ない),ボタンを構成する要素にdisabledクラスをjQueryで追加して,非表示にさせます.
.activeは現在のインジケーターの色を変更して,どこのスライドにいるかわかりやすくしています.これも.disabled同様,現在のインジケーターにactiveクラスをjQueryで追加します.
このコードはSCSSのコードになるので,CSSにコンパイルします.サイト下のサンプルページのダウンロードファイルにはCSSに変換したものも用意してあります.
jQuery(main.js)
$(function(){
$('#slide-show').each( () => {
// 変数
var $container = $(this),
$slideGroup = $container.find('.slide-items'),
$slides = $slideGroup.find('.slide'),
$nav = $container.find('.slide-nav'),
$indicator = $container.find('.slide-indicator'),
slideCount = $slides.length, //スライドの枚数
indicatorHTML = '', //インジケータ
currentIndex = 0, //現在のスライド番号
time = 500, //スライドにかかる時間
easing = 'easeInOutExpo', //スライド方法
interval = 3000, //各スライドの表示間隔
timer;
//インジケーターの作成と各スライドを横一列に並べる
$slides.each(function(i){
$(this).css({left: 100*i+'%'});
indicatorHTML += '<a href="#" class=ind_'+(i+1)+'></a>';
})
$indicator.html(indicatorHTML);
//指定された番号のスライドに移動する関数
function goToSlide (index) {
$slideGroup.animate({left: -100 * index + '%'},time,easing);
currentIndex = index;
updateNav();
}
//前後へのナビゲーションボタンの表示設定と,現在のインジケータの設定
function updateNav () {
var $navPrev = $nav.find('.prev'),
$navNext = $nav.find('.next');
if(currentIndex === 0){
$navPrev.addClass('disabled');
} else{
$navPrev.removeClass('disabled');
}
if(currentIndex === slideCount - 1){
$navNext.addClass('disabled');
} else{
$navNext.removeClass('disabled');
}
$indicator.find('a').removeClass('active').eq(currentIndex).addClass('active');
}
//ナビゲーションボタンが押された時の動作
$nav.on('click','a',function(event){
event.preventDefault();
if( $(this).hasClass("prev") ){
goToSlide(currentIndex - 1);
} else{
goToSlide(currentIndex + 1);
}
});
//現在のインジケーター以外が押された時の動作
$indicator.on('click','a',function(event){
vent.preventDefault();
if(!$(this).hasClass('active')){
goToSlide($(this).index());
}
});
//一定時間ごとに次のスライドに移動する関数
function startTimer () {
timer = setInterval(function(){
var nextIndex = (currentIndex + 1) % slideCount;
goToSlide(nextIndex);
},interval);
}
//自動スライドを停止する関数
function stopTimer () {
clearInterval(timer);
}
//スライドにカーソルを載せた時に,自動スライドを止める
$container.on({
mouseenter: stopTimer,
mouseleave: startTimer
})
//初期スライドの設定
goToSlide(currentIndex);
//自動スライドを開始
startTimer();
});
});
機能がいくつかあるスライドなので,少し難しいですが,一つ一つ見ていくとやっていることは,そこまで難しくありません.全てを説明すると管理長くなってしまうので,jQueryの説明は省きます.それぞれの関数や処理の前に,コメントアウトで役割を書いてあるので,それを参考にしてみてください.
サンプルページはこちらからも閲覧できます.
サンプルページのコードはこちらからダウンロードできます.