トップへ戻る
BLOGS

JS 自作スライドショー制作まとめ②(自動スライダー)

JS 自作スライドショー制作まとめ②(自動スライダー)


はい。

今回はJavaScript、CSSのみを使用した、スライドショーの制作記録をまとめていきます。

スライドショーの種類ごとにコードの記録をそのまま残して行こうと思います

というのもスライドショーはどのサイトでも見られるほどメジャーなアニメーションですが、今の所私のサイトでは実用に至る箇所がなかったため、

せっかく覚えたものをそのままコピペできるように残しておこうと思います。

ゆっくり切り替わる、自動スライダー

以前制作したコードはスライダーを起動させるためには必ずクリックするという動作が必要であったわけですがここからは自動で画像がスライドするスライダーの実装方法です。

<div class="container">
  <div class="sliderbox">
    <ul class="sliderlist">
      <li class="slider_item show"><img src="img/teien6.jpg"></li>
      <li class="slider_item"><img src="img/teien4.jpg"></li>
      <li class="slider_item"><img src="img/teien5.jpg"></li>
    </ul>
  </div>
</di

スライダーの仕組みから解説

こちらのスライダーは画像自体を切替えたりスライドをさせるわけではなく、

それを覆っているulタグを前後にスライドさせてあたかも画像がスライドしているかのように見えるという仕組みです

CSSスニペット

//自動スライダー
.container{
  width: 500px;
  height: 300px;
  margin: 100px auto 30px;
}

.sliderbox{
  border: 2px solid red;
  overflow: hidden;
}

.sliderlist{
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: 0.5s;
}

.slider_item{
  flex-shrink: 0;
  width: 500px;
  height: 300px;
  opacity: 0;
  transition: 0.7s;
  &.show {
    opacity: 1;
  }
  img {
    width: 100%;
    display: block;
    object-fit: cover;
  }
}

大きさや配置などは都度変更して下さい

ポイントとなるのはoverflow: hidden;ではみ出した画像を見えないようにしておく事です

また.showがついた画像だけゆっくり現れる様に普段は見えなくしていますがすべて記述が終わるまではこれは見える様にしておくべきですね

それではJSで要素の取得からですね

要素を取得し要素の幅も取得しておく

let counter = 0;
const sliderwidth = document.querySelector(".slider_item");
let width = sliderwidth.clientWidth;
const sliderlist = document.querySelector(".sliderlist");
const slider_item = document.querySelectorAll(".slider_item");

冒頭で変数counterを定義しておきます

こちらは現在スライドがどこにいるのかの設定に使用します

sliderwidth.clientWidth;で取得した要素の幅を変数にしておきます

ちなみにgetBoundingClientRect.widthでも問題ありません。

スライドさせる、見えている箇所にはクラスを付与する

counter++;
  sliderlist.style.transform = "translateX(" + -width * counter + "px)";
  for (let i = 0; i < slider_item.length; i++) {
    slider_item[i].classList.remove("show");
  }
  slider_item[counter].classList.add("show");

counter++;として毎回プラスしていく事で現在のスライドからの距離を求めています

実際にスライダーを動かすのは、

“translateX(” + -width * counter + “px)”;の部分です

動かす幅を要素の幅分マイナスで指定し、その数値に現在のcounterを掛け算することで連続してスライドすることが可能になります

そしてCSSの指定をするためのクラス一度すべて削除してから、

現在のcounterの数値だけはまたそのクラスを付けておくようにします

最後のスライドの処理

sliderlist.addEventListener("transitionend", () => {
    if ((counter === slider_item.length - 1)) {
      counter = -1;
    }
  });

すべてのスライドの移動後つまりtransitionendのタイミングにイベントリスナーを仕込んでおきます

counterの数値がslider_item.length – 1とすることで最後の配列要素のと同じになった時として、

counterの数値をマイナス1にしてリセットします

関数化してタイマーをセットする

最後にcounter以外を、

const slider = () => {
//処理
}

で囲って、

setInterval(slider, 3000);

としてインターバルタイマーをセットしたら完成です

もちろん中にsetTimeoutで書いても問題ありません。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA