Home > Design > cssだけで作るslider
Home > Html & Css > cssだけで作るslider

cssだけで作るslider

公開日:

最終更新日:

css-slider

cssだけで出来るスライダーを作ってみました。

特に機能はいらないけど、サクッとスライダーにだけしたいって時にいいかもです。

最後までいって戻るやつ

最後のスライドまで行って戻るやつ

Demo

デモはこちら

Html

css

.sliderにwidth:70vw;で幅を指定して、display:flex;で横並びにしています。はみ出した物にはhiddenを掛けて消しています。

.slider__contentをキーフレームアニメーションでずらしていってます。

スライドが3枚なので、静止時間1秒×3の移動時間1秒×3で6秒です。枚数によって調整してください。キーフレームの%と

ちなみに.slider:hover .slider__content{animation-play-state: paused;}してやると、ホバーしている間止まります。ただ、IEとEdgeで止めた後の挙動がおかしくなるので、microsoft系のブラウザはいらね~って方は是非

一番ベタな動き

スライドが最後まで行ったら、1に戻るってやつです。

Demo

デモはこちら

html

htmlはさっきと一緒です。

css

スライドを1枚づつスライドさせて、他のスライドがスライドしている時に元の位置に戻すって感じです。回転してるって感じ

.sliderにwidth:70vw;で幅を指定して、position: relative;でスライドの基準位置を作ってます。はみ出した物にはhiddenを掛けて消しています。

.slider__contentでスライドを全部重ねて、右へ100%ずらしてます。

:nth-childでスライドそれぞれを指定してます。1枚目のスライドだけが、表示からのスタートなので、違うアニメーションです。

とりあえずスライドが3枚なのでこの6sですが、枚数によって調整してください。キーフレームの%と

ちなみに:nth-child(2)と3にある1sと3sは〇秒たってからスタートって意味です。

3枚にしたので、%が割り切れなくてあれでしたが、割り切れる感じにするともうちょっと綺麗です。
何か変だぞとかあったら連絡ください~

Comment

よろしければコメントをどうぞ