CSS HTML Javascript

カルーセルの完成

ウィンドウの大きさを変えたときに画像がずれる不具合を修正していきます。

  • リサイズイベント

JavaScriptJavaScript

リサイズイベント

・前回までで進む、戻るや下のボタンをクリックすると指定の位置に移動し、今どこの画像が表示されているのかを濃く表示するクラスをつけて行きました。

・これである程度完成なのですが、画面を小さくすると画像が変な切り取られ方をしてしまうバグがあります。

・今回はそのバグを直していきましょう。

・やり方は簡単でwindowに対してイベントリスナーを追加してあげます。

・イベントリスナーの内容はリサイズされた時moveSlides();を実行してスライドの幅を再計算してあげます。

・こんな感じですね。

window.addEventListener('resize', () => {

    moveSlides();

  });

・こんな感じでカルーセルをJavaScriptで作成することが出来ます。

・他の言語でも作ることはできるので今後公開していきます。

-CSS, HTML, Javascript