背景画像でスライドショー、ドット付き（自作）

はじめに

jsのスライドショーのライブラリといえば、slickが有名でよく使っていますが、背景画像のスライドショーができない？ような気がしたので、背景画像(background-img)のスライドショーを自作しました。

動きとしては、ふわっと画像が切り替わって、ドットが表示されるやつです。

背景画像じゃないと、画面の幅に合わせての表示がちょっとむずかしいねん。

コード

html

<div class="top-page-header">
    <div id="top-slide">
        <div class="slide-img slide1"></div>
        <div class="slide-img slide2"></div>
        <div class="slide-img slide3"></div>
        <div class="slide-img slide4"></div>
        <ul class="slide-dots">
            <li>・</li>
            <li>・</li>
            <li>・</li>
            <li>・</li>
        </ul>
    </div>
</div>

scss

.top-page-header {
    position: relative;
    height: 100vh;
}

# top-slide {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.slide-img {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.slide1 {
    background-image: url('../images/top/topimg_1.jpg');
    opacity: 1;
}

.slide2 {
    background-image: url('../images/top/topimg_2.jpg');
    opacity: 0;
}

.slide3 {
    background-image: url('../images/top/topimg_3.jpg');
    opacity: 0;
}

.slide4 {
    background-image: url('../images/top/topimg_4.jpg');
    opacity: 0;
}

.slide-dots {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 55px;
    color: #fff;
    width: 15px;

    li {
        display: block;
        cursor: pointer;
        font-size: 34px;
        line-height: 0.9;
        opacity: 0.4;

        &:nth-of-type(1) {
            opacity: 1;
        }
    }

    z-index: 3;
}

javascript

//スライド
var slideNumber = 1
var allSlide = [1, 2, 3, 4]

setInterval(toggleSlide, 8000)

//スライドを切り替える
function toggleSlide() {
    slideNumber++

    if(slideNumber > 4) {
        slideNumber = 1
    }

    //対象のスライドを表示する
    $('.slide' + slideNumber).animate({opacity: 1}, 800)
    $('.slide-dots li:nth-of-type(' + slideNumber + ')').animate({opacity: 1}, 800)

    //他のスライドはopacity: 0にする
    for(var i = 1; i <= allSlide.length; i++) {
        if(i !== slideNumber) {
            $('.slide' + i).animate({opacity: 0}, 800)
            $('.slide-dots li:nth-of-type(' + i + ')').animate({opacity: 0.5}, 800)
        }
    }
}

//ドットをクリックしたとき
$('.slide-dots li').on('click', function() {
    var index = $('.slide-dots li').index(this)

    slideNumber = index
    clearInterval()
    toggleSlide()
})

最後に

コードしか載せてないけど...

ちなみに4枚のスライドにしか対応してないので、適宜書き換えてください。

多分こちらのライブラリでもよかったのですが、デザインでドットが表示されていたんで、諦めたんやった...