JavaScriptでスライドショーの作り方を紹介♪【脱jQuery 】

jQueryを使わないで素のJavaScriptでスライドショーを作ってみたいなぁ♪

今回はこのようなお悩みを解決します！

結論から言うと、素のJavaScriptでも割と簡単にスライドショーは作れます。

ただ、「Swiper」のような有名なプラグインみたいに多機能ではないしフリックにも対応していませんが、シンプルで軽いスライドショーを求めていたら、本記事で紹介するスライドショーを使ってみてください。

記事でわかること

・JavaScriptでスライドショーを実装する方法

記事の信頼性

筆者のかがみ（@cony_tas）はWeb/UIデザイナー歴8年になります。
ゲーム会社でさまざまなWebサイトやゲームUIを制作しています。

CONTENTS［ hide ］

01｜ JavaScriptでスライドショーの作り方を紹介♪
・実装に必要なコード
02｜最後に：JavaScriptでスライドショーの作り方を紹介♪

JavaScriptでスライドショーの作り方を紹介♪

さっそくですが、先に完成版デモをご紹介します。
必要最低限の実装ですが、シンプルで軽いと思います。

実装に必要なコード

ここからスライドショーの実装に必要なコードを載せていきますね。

HTMLコード

<div class="slideShow">
    <ul class="imgWrap">
        <li class="is-show"><img src="https://cony-tas.com/wp-content/uploads/2020/04/eyecatch_0426-486x290.jpg" alt=""></li>
        <li><img src="https://cony-tas.com/wp-content/uploads/2020/04/eyecatch_0424-486x290.jpg" alt=""></li>
        <li><img src="https://cony-tas.com/wp-content/uploads/2020/04/eyecatch_0422-486x290.jpg" alt=""></li>
    </ul>
    <button class="btn-prev">▼</button>
    <button class="btn-next">▼</button>
</div>

CSSコード

.slideShow {
    position: relative;
    width: 60%;
    margin: 0 auto;
}

.slideShow ul.imgWrap {
    display: flex;
    flex-flow: row nowrap;
}

.slideShow ul.imgWrap li {
    display: none;
    width: 100%;
    list-style-type: none;
}

.slideShow ul.imgWrap li.is-show {
    display: block;
    animation: slideAnime 300ms ease-out 0ms 1 normal both;
}

@keyframes slideAnime {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.slideShow ul.imgWrap li img {
    width: 100%;
}

.slideShow button {
    display: block;
    position: absolute;
    top: calc( 50% - 20px );
    bottom: 0;
    width: 40px;
    height: 40px;
    padding: 4px 0 0 0;
    background: #ffdf85;
    border: none;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.3em;
    outline: none;
    transition: transform 200ms;
}

.slideShow button.btn-prev {
    left: -50px;
    transform: rotate( 90deg );
}

.slideShow button.btn-prev:hover {
    transform: rotate( 90deg ) scale( 1.1 );
}

.slideShow button.btn-next {
    right: -50px;
    transform: rotate( -90deg );
}

.slideShow button.btn-next:hover {
    transform: rotate( -90deg ) scale( 1.1 );
}

JavaScriptコード

const slideShow = function () {

    const images = document.querySelectorAll( '.slideShow ul.imgWrap li' ),
          imagesLength = images.length - 1,
          next = document.querySelector( '.slideShow .btn-next' ),
          prev = document.querySelector( '.slideShow .btn-prev' );

    let cnt = 0;

    function showNext () {
        if ( cnt >= imagesLength ) {
            cnt = 0;
            images.item( cnt ).classList.add( 'is-show' );
            images.item( imagesLength ).classList.remove( 'is-show' );
        } else {
            images.item( cnt ).classList.remove( 'is-show' );
            images.item( cnt + 1 ).classList.add( 'is-show' );
            cnt += 1;
        }
    }

    function showPrev () {
        if ( cnt === 0 ) {
            images.item( cnt ).classList.remove( 'is-show' );
            images.item( imagesLength ).classList.add( 'is-show' );
            cnt = imagesLength;
        } else {
            images.item( cnt ).classList.remove( 'is-show' );
            images.item( cnt - 1 ).classList.add( 'is-show' );
            cnt -= 1;
        }
    }

    next.addEventListener( 'click', showNext );
    prev.addEventListener( 'click', showPrev );

};

slideShow();

実装に必要なコードは以上です。
画像は好きな枚数だけliタグと一緒に追加していただいて問題ないです。

最後に：JavaScriptでスライドショーの作り方を紹介♪

素のJavaScriptで作るスライドショーはいかがだったでしょうか。

ちょっとシンプルすぎた気もするので、後日アニメーションをもう少し凝ったものにしたり、ページャー機能を追加するかもしれません。

今後もちょっと役に立つJavaScriptコードを色々と紹介していこうと思いますので、また遊びにきてくださいね！

他にも下記のようなJavaScriptの記事を書いていますので、よかったらご覧ください。

>> JavaScriptでアコーディオンメニューの作り方
 >> スムースなスクロールをJavaScriptで実装してみよう
 >> JavaScriptでスクロール時にイベントを実装してみよう

いつも遊びにきてくれて、ありがとう……♪

>> プログラミング記事一覧へ

ブログトップへ