cssだけで作るslider
cssだけで出来るスライダーを作ってみました。
特に機能はいらないけど、サクッとスライダーにだけしたいって時にいいかもです。
最後までいって戻るやつ
最後のスライドまで行って戻るやつ
Demo
Html
|
1 2 3 4 5 |
<div class="slider"> <div class="slider__content"><img src="images/slider_image1.jpg" alt="slider_image1" class="slider__img"></div> <div class="slider__content"><img src="images/slider_image2.jpg" alt="slider_image2" class="slider__img"></div> <div class="slider__content"><img src="images/slider_image3.jpg" alt="slider_image3" class="slider__img"></div> </div> |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.slider{ width: 70vw; margin: 0 auto; overflow: hidden; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .slider__content{ min-width: 100%; animation: sliderAnime 6s ease-in-out infinite; } @keyframes sliderAnime{ 0%{ } 16.6%{ transform: translateX(0); } 33.3%{ transform: translateX(-100%); } 50%{ transform: translateX(-100%); } 66.6%{ transform: translateX(-200%); } 83.2%{ transform: translateX(-200%); } 100%{ transform: translateX(0); } } .slider__img{ max-width: 100%; min-width: 100%; } |
一番ベタな動き
スライドが最後まで行ったら、1に戻るってやつです。
Demo
html
htmlはさっきと一緒です。
|
1 2 3 4 5 |
<div class="slider"> <div class="slider__content"><img src="images/slider_image1.jpg" alt="slider_image1" class="slider__img"></div> <div class="slider__content"><img src="images/slider_image2.jpg" alt="slider_image2" class="slider__img"></div> <div class="slider__content"><img src="images/slider_image3.jpg" alt="slider_image3" class="slider__img"></div> </div> |
css
スライドを１枚づつスライドさせて、他のスライドがスライドしている時に元の位置に戻すって感じです。回転してるって感じ
.sliderにwidth:70vw;で幅を指定して、position: relative;でスライドの基準位置を作ってます。はみ出した物にはhiddenを掛けて消しています。
.slider__contentでスライドを全部重ねて、右へ100%ずらしてます。
:nth-childでスライドそれぞれを指定してます。1枚目のスライドだけが、表示からのスタートなので、違うアニメーションです。
とりあえずスライドが3枚なのでこの6sですが、枚数によって調整してください。キーフレームの%と
ちなみに:nth-child(2)と3にある1sと3sは〇秒たってからスタートって意味です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
.slider{ width: 70vw; height: calc(70vw * 1.61); margin: 0 auto; overflow: hidden; position: relative; } .slider__content{ min-width: 100%; position: absolute; top: 0; left: 0; transform: translateX(100%); } .slider__content:nth-child(1){ animation: sliderAnime 6s ease-in-out infinite; z-index: 6; } .slider__content:nth-child(2){ animation: sliderAnime2 6s ease-in-out 1s infinite; z-index: -1; } .slider__content:nth-child(3){ animation: sliderAnime2 6s ease-in-out 3s infinite; z-index: -1; } @keyframes sliderAnime{ 0%{ z-index: 5; transform: translateX(0); } 16.6%{ transform: translateX(0); } 33.3%{ transform: translateX(-100%); } 50%{ z-index: -1; transform: translateX(-100%); } 66.6%{ transform: translateX(100%); } 83.2%{ z-index: 5; transform: translateX(100%); } 100%{ z-index: 5; transform: translateX(0); } } @keyframes sliderAnime2{ 0%{ z-index: 5; transform: translateX(100%); } 16.6%{ transform: translateX(0); } 33.3%{ transform: translateX(0); } 50%{ transform: translateX(-100%); } 66.6%{ z-index: -1; transform: translateX(-100%); } 83.2%{ transform: translateX(100%); } 100%{ z-index: 5; transform: translateX(100%); } } .slider__img{ max-width: 100%; min-width: 100%; } |
3枚にしたので、%が割り切れなくてあれでしたが、割り切れる感じにするともうちょっと綺麗です。
何か変だぞとかあったら連絡ください～
「スライドが最後まで行ったら、1に戻るってやつです。」の１枚目と２枚目の境目にわずかですが余白が一瞬できるのですが、
そこを詰めるにはどうしたらよいでしょうか
コメントありがとうございます。
4つとかでしたら、割り切れますので、ズレないかと思います。
.slider {
width: 70vw;
height: calc(70vw * 1.61);
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slider__content {
min-width: 100%;
position: absolute;
top: 0;
left: 0;
transform: translateX(100%);
}
.slider__content:nth-child(1) {
animation: sliderAnime 8s ease-in-out infinite;
z-index: 6;
}
.slider__content:nth-child(2) {
animation: sliderAnime2 8s ease-in-out infinite;
z-index: -1;
}
.slider__content:nth-child(3) {
animation: sliderAnime2 8s ease-in-out 2s infinite;
z-index: -1;
}
.slider__content:nth-child(4){
animation: sliderAnime2 8s ease-in-out 4s infinite;
z-index: -1;
}
@keyframes sliderAnime {
0% {
z-index: 5;
transform: translateX(0);
}
12.5% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
37.5%{
z-index: -1;
transform: translateX(-100%);
}
50% {
z-index: -1;
transform: translateX(100%);
}
67.5% {
z-index: -1;
transform: translateX(100%);
}
75% {
z-index: -1;
transform: translateX(100%);
}
87.5%{
z-index: 5;
transform: translateX(100%);
}
100% {
z-index: 5;
transform: translateX(0);
}
}
@keyframes sliderAnime2 {
0% {
transform: translateX(100%);
}
12.5% {
transform: translateX(100%);
}
25% {
transform: translateX(0);
}
37.5%{
transform: translateX(0);
z-index: 5;
}
50% {
transform: translateX(-100%);
z-index: 5;
}
67.5% {
z-index: -1;
transform: translateX(-100%);
}
75% {
z-index: -1;
transform: translateX(100%);
}
87.5%{
z-index: -1;
transform: translateX(100%);
}
100% {
z-index: -1;
transform: translateX(100%);
}
}
.slider__img {
max-width: 100%;
min-width: 100%;
}
失礼しました
ちょっと間違ってたので、修正しました
demo
こちらのスライダーに右端と左端に矢印を入れて、それを押すと右、左に画像をスライドさせたいのですが、
どう記述したらいいのでしょうか？CSSだけで出来るでしょうか？
申し訳ございません。ご教授頂けるとありがたいです。よろしくお願いします。
cssだけではクリックイベントを取得できませんので、jsで操作する必要が出てきます。
これを改造するよりも、swiper.jsの様なライブラリがありますので、そちらをご利用になられるのが、
いいかと思います。
https://swiperjs.com/
使い方が分からないなどは、別途ご連絡ください。
モバイル用に軽いのを探していて導入したいのですが、
5枚で15秒の場合ですとどのようになるのでしょうか。
お手数おかけして申し訳ありませんがご教示いただけますと幸いです。
特にdelayの秒数設定の仕組み？が分かりかねます、、
モバイル用に軽いものを探していて導入したいのですが
5枚で15秒ですとどのようになるのでしょうか。
特にdelayの秒数設定の仕組み？が分からず
お手数をおかけして申し訳ありませんがご教示いただけますと幸いです。
まず、15秒5枚ですので、animationの設定時間は15秒になります
そして、3枚目から時間をずらしますので、3秒ずつ増えていきます(15/3)。
キーフレームは100%/10で10%づつ記載します。
値が被っている所は消して大丈夫ですが、分かり易いように記載しております。
サンプル
安田さん、初めまして！いつも勉強させていただいております^^
コチラのCSSスライダーについて、自分ではどうしてもうまくいかないところがあり、お手間非常に恐縮なのですが..お教えいただきたいのです； 以下のDEMOのページをスマホで表示しますと、画像の動きにズレが発生するのですが、コレを解決するにはどのような解決策がございますでしょうか…?不躾で申し訳ございません；
https://webnooboegaki.com/demo/cssslider/index3.html
コメントありがとうございます。
こちら３枚ですので、割り切れない為、若干の隙間で出来てしまいます。
ですので、割り切れる枚数にしていただくと良いかと思います。
他の返信で４つのも書いてますので、参考にしてみてくださいね^^
初めまして！勉強させて頂いています！
まだまだCSSを勉強中で本当に初歩的な事をお伺いして申し訳ないのですが…
4枚や3枚でスライダーを作った際
1枚が表示されている時間が1秒程だと思うのですが…
こちらを2秒にしたい時はどこをどう変更しればいいのかお教え頂けますと幸いです。。
デモでは3枚をkeyframeアニメーションを16.6%ずつに割っています。（誤差があるので、正確には16.6666666を丸めてます）
そして、animationが6s秒なので、
これは、1秒静止1秒移動という事になります。
単純に6sを12sにすると、各静止移動が2sになります。
それに伴い、delay(待ち時間も)1s,3sから大きくなります。
2枚目なら、2秒の静止なので2sになります
3枚目なら、上記にさらに2sと移動の2sが足され6sになります。
移動時間を変更したいなら、keyframeの16.6%を単純に割った数値ではなく、移動が1秒で静止2秒なら何%になるかなど計算していただけたらと思います。