ホームページを作る時に、何かとカルーセルと言われます。
みんな横スライド処理が大好きなんですね。
いや、別にカルーセル処理が憎くも悪くもないのですよ。
webサイトにとって、非常に効果のある機能だと思ってます。
ただ、色々なライブラリを使ったり、めんどくさい運用などをやるのが嫌なだけで、もっと簡単にカルーセルが作れたら便利じゃないですか？
というわけで、自分がよく構築する方法をコピペできるコードで紹介したいと思います。
サンプル
適当な画像を３つサンプルとして使います。
サイズも色味も違うことで、汎用的に作れるようにしますね。
sample.html
<div class='carousel'>
<div class='items'>
<img src='img/img-1.jpg'>
<img src='img/img-2.jpg'>
<img src='img/img-3.jpg'>
</div>
</div>
carousel.css
.carousel{
width:300px;
height:200px;
position:relative;
}
.carousel .items{
width:100%;
height:100%;
display:flex;
gap:20px;
overflow-x:scroll;
position:relative;
border:4px solid black;
border-radius:8px;
}
.carousel .items > *{
width:300px;
height:100%;
flex:1;
}
.carousel .items img{
width:100%;
min-width:100%;
height:100%;
object-fit:cover;
}
/* scroll-bar hidden */
.carousel .items{
-ms-overflow-style: none;
scrollbar-width: none;
}
.carousel .items::-webkit-scrollbar{
display:none;
}
/* Carousel */
.carousel .items{
scroll-snap-type: x mandatory;
}
.carousel .items > *{
scroll-snap-align: center;
}
デモ
使い方とポイント
比較的簡易なHTML構造でカルーセルできていしまいます。
今後ページネーション（ページャー）機能などをつけることを考えると、画像などのスライドアイテムが入る器をさらに上に１階層多くしておきました。
今回のcssをコピペで使う場合は、次の構造にすると、大体どんな画像でも対応できると思います。
.carousel
└ .items
│ image-1
│ image-2
└ image-3
画像の枚数はいくつでもできるし、画像ではなく、divタグなどにして、その中に個別に装飾をすることも可能です。
（その場合は、個別にcssなどで独自にコーディングする必要があります）
今回のカルーセルのポイントは、cssの中に書いてある、次のコードです。
.carousel .items{
scroll-snap-type: x mandatory;
}
リファレンスサイト :
MDN: scroll-snap-type
この機能を使うと、DOM構造の中にフィットするように配置して、アニメーション処理も自動で行ってくれる便利機能なんですよね。
カルーセルのようなパーツじゃなく、画面全体に対して使うことで、ページ切り替えを効果的にするようなホームページを作ることも可能ですね。
あと、スクロールバーを非表示にする処理も重要なポイントなので、自身でコーディングする際は忘れないようにしましょう。
（次のコードの部分です）
/* scroll-bar hidden */
.carousel .items{
-ms-overflow-style: none;
scrollbar-width: none;
}
.carousel .items::-webkit-scrollbar{
display:none;
}
あとがき
実際に、これだけの機能だけだと、足りないと感じる人は、次のような機能が欲しいと思っているでしょう。
・ページネーション機能
・前後の送りボタン
・自動的にスライドを見せることができるオートスクロール機能
・最後まで行ったら、自動的に最初の画像が次に繰り返される、無限スライド機能
上記の機能は、Javascriptを使わなくてはいけなくて、今回のcssだけの趣旨とは違ってくるので、また別の機会にブログで紹介したいと思います。
そういえば、以前に全然別の方法で、Githubにもカルーセル機能をアップしていたことを思い出しました。
合わせてこちらも見てみてください。
https://github.com/yugeta/carousel
0 件のコメント:
コメントを投稿