HTML と CSS の機能のみでカルーセルを作成するチュートリアルを用意しました。理解の前に「動かす感覚」を味わってもらうため、ほぼ全てコピー&ペーストのみで、素早く進められるチュートリアルになっています。
<iframe width="640" height="360" src="https://www.youtube.com/embed/wLTp7YvLBSc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>🔶 Action: ターミナルで以下のコマンドを実行してください
git clone https://github.com/richardimaoka/tutorial-carousel-html.git
cd tutorial-carousel-html
このチュートリアルでは index.html ファイルのみを使用します。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/db47c7f.patch # initial HTML✅ Result: index.html が生成されます。
🔶 Action: ブラウザからindex.htmlを開いてください。
✅ Result: ブラウザで以下のように表示されればOKです
まずはカルーセルで使う画像を並べて表示します。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/365ac03.patch # add images🔶 Action: ブラウザでindex.htmlをリロードしてください。
✅ Result: 以下のように表示されればOKです。この時点では縦に並んでいます。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/cd0b584.patch # display: flex🔶 Action: ブラウザでindex.htmlをリロードしてください。
✅ Result: 以下のように表示されればOKです
画面下にスライダーが表示されましたが、これはブラウザビューポートのスライダーであって、まだカルーセルのスライドではありません。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/ca39bc3.patch # overflow-x: auto🔶 Action: ブラウザでindex.htmlをリロードしてください。
✅ Result: 以下のように表示されればOKです。
<iframe width="640" height="360" src="https://www.youtube.com/embed/FWGRBRw7sLk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>画像のすぐ下、つまりカルーセルの内部にスライダーが移動しました。
ここからカルーセルをスライドさせるためのボタンを配置しますが、一気に実装してしまうとコードの差分が大きくなって、何がどう作用しているのか分かりづらくなってしまいます。そこでまずは、何も動作しないボタンを配置します。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/392ba1b.patch # add barebone buttons🔶 Action: ブラウザでindex.htmlをリロードしてください。
✅ Result: 以下のように表示されればOKです。
小さくてわかりにくいですが、ボタンが画像の左下に配置されました。
次に、ボタンを使ってカルーセルを動かす部分を実装します。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/dc7e1df.patch # button links✅ Result: 以下のように表示されればOKです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/qi_HzS4SN80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>次は、カルーセル内の次の画像に遷移するときの動きをスムーズにします。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/f1a8c6b.patch # smooth scrolling🔶 Action: ブラウザでindex.htmlをリロードしてください。
✅ Result: 以下のように表示されればOKです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/MsyqxpK6x2s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>🔶 Action: 以下のコマンドを入力してください。
git apply patches/f05034a.patch # hide scroll bar🔶 Action: ブラウザでindex.htmlをリロードしてください。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/bbbc003.patch # centering buttons🔶 Action: ブラウザでindex.htmlをリロードしてください。
✅ Result: 以下のように表示されればOKです。
🔶 Action: 以下のコマンドを入力してください。
git apply patches/915876d.patch # decorate buttons🔶 Action: ブラウザでindex.htmlをリロードしてください。
✅ Result: 以下のように表示されればOKです。
<iframe width="640" height="360" src="https://www.youtube.com/embed/wLTp7YvLBSc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>以上 HTML と CSS の 機能のみでカルーセルを実装しました。カルーセルのアイテム(画像を囲む <div>)一つ一つに対して、<div id="#img-1">のような id アトリビュートを付与し、移動の際は <a href="#img-1">のように id アトリビュートの値を指定したリンクをクリックすることで、 カルーセルの特定のアイテムが表示される状態になります。
これには制限があり、1 ページ内に複数のカルーセルが配置されるような場合、その中での一つのカルーセルの状態しか指定できません。こういった制限を避けようとすると、JavaScript を使う必要に迫られますが、React などを使わない素の JavaScript で一からこの動作を実現するのはけっこう大変です。
JavaScript を使う場合には、以下のリンク先にあるように、React を使うほうが簡単でしょう。
- CSS-Only Carousel - CSS-TRICKS https://css-tricks.com/css-only-carousel/
- CSS overflow - Mozilla https://developer.mozilla.org/en-US/docs/Web/CSS/overflow