CSS HTML Javascript

ボタンを隠す

ボタンの状態を更新することで、不具合を直していきます。

  • 非表示
  • 関数
  • 通常時

非表示

・前回までで進むボタンと戻るボタンをうまく機能させることに成功しました。

・今回は進みすぎてしまったり戻り過ぎてしまったりした場合に画像がなくなって背景になってしまうのでその不具合を治して行きます。

・具体的にはスライドの画像がなくなったら進むボタンや戻るボタンを隠してしまってこれ以上押せないようにしていきます。

・どうするかと言うとif関数を使ってスライドの数に達したり0以下になったら戻るボタンか進むボタンを消していきます。

・まずはCSSで消すためのスタイリングを作っていきます。

・hiddenクラスを作ってdisplay: none;と書いていけばいいでしょう。

関数

・そしたらこの.hiddenクラスを使ってJavaScriptを書いていきましょう。

・ボタンの状態を更新する関数を作っていきたいのでfunctionでupdateButtons()という関数を作っていきましょう。

・まずは最初の画像が表示されている時にこれ以上戻ってしまうと背景が白くなってしまうのでボタンを消していきたいですね。

・なのでcurrentIndexが0のときはprevのボタンを消したいので戻るボタンに対してclassList.add(‘hidden’)としてあげましょう。

・こんな感じですね。

    if (currentIndex === 0) {

      prev.classList.add('hidden');

    }

・同様に進むボタンを作っていきたいのですがif (currentIndex === 2)というようにやっても良いのですがこれだと画像が増えた場合に毎回ここを書き直さないといけなくなってしまうのでスライドの数で書いていきましょうsides.lengthから1を引いた数なのでif (currentIndex === slides.length - 1)ですね。

・こんな感じです。

    if (currentIndex === slides.length - 1) {

      next.classList.add('hidden');

    }

通常時

・そして通常状態はボタンを表示しておきたいのでこの辺もしっかり最初に書いておきましょう。

・こんな感じですね

    prev.classList.remove('hidden');

    next.classList.remove('hidden');

・あとはこの関数を実行するタイミングですが長くなりそうなので次回にしていきましょう。

 

-CSS, HTML, Javascript