スライダーの切り替えエフェクトをスライドバージョンに切り替えました。 切り替えエフェクトが変わるとCSSの設定も変わるため、JavaScriptの実装もそれに合わせて作り変えてください。

使用するファイル

配布

• kadai13.html
• kadai13.css

作成

• kadai13.js

ダウンロード

kadai13.zip

仕様

スライダーの画像を横スライドアニメーションで切り替えるようにしましょう。

基本的なスライダーのHTML構造は以前実装したスライダーの課題のままになります。 CSSの設定が変わっているため、CSSの設定内容を確認して、JavaScriptでスライダー機能を実装してください。

<aside> 💡 transitionアニメーションが終了した時に発動するイベント

addEventListener( “transitionend”, function );

transitionend イベントを利用しなくても実装は可能になります。

</aside>