コピペで実装!jQueryで作る高機能スライドショー

  • LINEで送る

前回の記事ではスライドごとにフェードイン,フェードアウトを繰り返すだけのスライドショーを作りました.これでも,スライドショーとしては機能するのですが,なにか物足りないですよね?前後のスライドに進むボタンや,現在のスライドの位置,一定時間ごとの自動スライド等があった方がおしゃれで,機能的ですよね.今回は高機能なスライドショーを作っていきます.

サンプルページ

実装する機能は以下の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の説明は省きます.それぞれの関数や処理の前に,コメントアウトで役割を書いてあるので,それを参考にしてみてください.

サンプルページはこちらからも閲覧できます.

サンプルページのコードはこちらからダウンロードできます.

侍エンジニア塾

SNSでもご購読できます。

コメントを残す

*