javascriptで画像をスライド

#はじめに
javascriptで画像をスライドをさせる方法が分かったのでその忘備録

#方法

画像のdisplayを変えるだけ

次にどの画像を表示するかわかるようにするためにquerySelectorAllでスライドを配列で取得してあれこれする。

#実装

まずhtmlに

    <div id="arrow-left" class="arrow"></div>
    <div id="arrow-right" class="arrow"></div>
    
    <div id="slider">
        <div class="slide slide1"></div>
        <div class="slide slide2"></div>
        <div class="slide slide3"></div>
    </div>

とかく

slide1,2,3のbackground-imageに画像を設定していきます。

div.arrowをクリックしたときに画像が移り変わる感じにする。

cssはとりあえずこんな感じ

body,#slider{
    margin: 0;
    padding: 0;
    width: 100%;
}

.slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
}

.slide1 {
    background-image: url(image1.jpg);
}

.slide2 {
    background-image: url(image2.jpg);
}

.slide3 {
    background-image: url(image3.jpg);
}

次に矢印を作ります

cssはこれ

.arrow{
    cursor: pointer;
    position: absolute;
    margin-top: 230px;
    width: 0;
    height: 0;
    border-style: solid;
}

#arrow-left{
    border-width: 20px 20px 20px 0;
    border-color: transparent gray transparent transparent;
    left: 0;
    margin-left: 30px;
}

#arrow-right{
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent gray;
    right: 0;
    margin-right: 30px;
}

画像のサイズによって表示はまちまちだと思うのでarrowのmargin-topは調整してください。

そうするとこんな感じになってると思います。

それで次に画像の処理をjsで書いていきます。

jsファイルに

var sliderImages = document.querySelectorAll('.slide');
var arrowRight = document.getElementById('arrow-right');
var arrowLeft = document.getElementById('arrow-left');
var current = 0;

と書きます。

sliderImagesはslideの画像のdivを配列として取得していて
arrowRight,arrowLeftがclickされたときにsliderImagesの現在をdisplay:noneにして次の画像を表示させる感じにしていきます。

まずはcssで

.slide1 {
    display: none; <= 追加
    background-image: url(image1.jpg);
}

.slide2 {
    display: none; <= 追加
    background-image: url(image2.jpg);
}

.slide3 {
    display: none; <= 追加
    background-image: url(image3.jpg);
}

として

function startSlide(){
    sliderImages[0].style.display = 'block';
}

arrowRight.addEventListener('click', function() {
    sliderImages[current].style.display = 'none';
    if(current === sliderImages.length - 1){
        current = -1;
    }
    sliderImages[current + 1].style.display = 'block';
    current++;
})

arrowLeft.addEventListener('click', function() {
    sliderImages[current].style.display = 'none';
    if(current === 0){
        current = sliderImages.length;
    }
    sliderImages[current - 1].style.display = 'block';
    current--;
})

startSlide();

を書く。

arrowRightが押されたらcurrentを+1してarrowLeftが押されたらcurrentを-1していく。

だけど例えばcurrentがそのまま3,4,5,6と増えていったらこまるので

もしcurrentがsliderImages.length - 1より大きくなりそうならcurrent = -1をしている

なんで0ではなく-1なのかというとそのあとで
sliderImages[current + 1]としているからです。

arrowLeftでは反対のことをしています。

これで一応動くと思います。

おわり。