サンプル（DEMO）
本サンプル表示用HTML
<!-- 画面上部の帯 -->
<div id="top_belt"></div>
<!-- スライド表示枠 -->
<div id="stage">
<!-- スライド切換えボタン用ラジオボタン -->
<input type="radio" id="r1" name="gal">
<input type="radio" id="r2" name="gal">
<input type="radio" id="r3" name="gal">
<input type="radio" id="r4" name="gal">
<input type="radio" id="r5" name="gal">
<!-- 送りボタン用ラジオボタン -->
<input type="radio" id="back1" name="gal"><input type="radio" id="next1" name="gal">
<input type="radio" id="back2" name="gal"><input type="radio" id="next2" name="gal">
<input type="radio" id="back3" name="gal"><input type="radio" id="next3" name="gal">
<input type="radio" id="back4" name="gal"><input type="radio" id="next4" name="gal">
<input type="radio" id="back5" name="gal"><input type="radio" id="next5" name="gal">
<!-- 現スライド標示ボタンのラジオボタンとの関連付け -->
<label for="r1" id="lb1" class="circ"><img src="images/btn_1.gif"></label>
<label for="r2" id="lb2" class="circ"><img src="images/btn_1.gif"></label>
<label for="r3" id="lb3" class="circ"><img src="images/btn_1.gif"></label>
<label for="r4" id="lb4" class="circ"><img src="images/btn_1.gif"></label>
<label for="r5" id="lb5" class="circ"><img src="images/btn_1.gif"></label>
<!-- スライド群 -->
<div id="photos">
<!-- スライド1 -->
<div id="photo1" class="pic">
<!-- スライド写真と現スライド標示ボタン -->
<img src="img2/1.jpg"><img src="images/btn_2.gif">
<!-- 送りボタンの表示とラジオボタンとの関連付け -->
<label for="back1"><span class="pb">＜</span></label>
<label for="next1"><span class="nb">＞</span></label>
</div>
<div id="photo2" class="pic">
<img src="img2/2.jpg"><img src="images/btn_2.gif">
<label for="back2"><span class="pb">＜</span></label>
<label for="next2"><span class="nb">＞</span></label>
</div>
<div id="photo3" class="pic">
<img src="img2/3.jpg"><img src="images/btn_2.gif">
<label for="back3"><span class="pb">＜</span></label>
<label for="next3"><span class="nb">＞</span></label>
</div>
<div id="photo4" class="pic">
<img src="img2/4.jpg"><img src="images/btn_2.gif">
<label for="back4"><span class="pb">＜</span></label>
<label for="next4"><span class="nb">＞</span></label>
</div>
<div id="photo5" class="pic">
<img src="img2/5.jpg"><img src="images/btn_2.gif">
<label for="back5"><span class="pb">＜</span></label>
<label for="next5"><span class="nb">＞</span></label>
</div>
</div>
<!-- stageの高さの確保 -->
<div style="padding:28%;"></div>
</div>
HTMLのポイント説明
・スライドは、両側の送りボタン表示枠とそれに挟まれた写真枠と、写真下部の現スライド標示ボタン表示枠とからなる。・個々のスライドは、水平に帯状に並べる（CSSで）。
・スライド切換えボタンは、個々のスライド枠外のステージに配置され、現スライド標示ボタンと同じ位置に各ボタンが来るように配置する。
本サンプル表示用CSS
※各スライドにリンクを貼ることが可能になるよう、修正しました。 css記述中に /* と */ で挟んだ記述がありますが、これは、初期の記述で、不要となったものです。修正した記述が必要なものは、その前後に示してありますので、そちらを採用してください。
/* 画面上部の帯 */
#top_belt { max-width:660px;height:15px;background:#666;margin:0 auto; }
/*スライダー全体のコンテナー*/
#stage {
position: relative;
max-width: 660px;
margin: 0 auto;
background:#666;
overflow: hidden;
}
/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {
display: none;
}
/* 表示切換えボタンと表示位置 */
.circ img {
position: absolute;
bottom:2.5%;
cursor: pointer;
}
#lb1 img { left: 40%;width:3%; }
#lb2 img { left: 43%;width:3%; }
#lb3 img { left: 46%;width:3%; }
#lb4 img { left: 49%;width:3%; }
#lb5 img { left: 52%;width:3%; }
/* 左右送りボタン */
.pb, .nb { color:#fff;font-weight:bold; font-size:26px;display:block;position:absolute;top:45%;/*z-index:200;pointer-events:auto;*/}
.pb { left:0%; }
.nb { left:96%; }
.pb:hover, .nb:hover { color:orange; cursor:pointer; }
/* stageが初期サイズ以下のなったときのサイズ */
@media screen and (max-width: 660px) { .pb, .nb { font-size:18px; } }
/*全表示スライドのコンテナー*/
#photos {
position: absolute;
width:100%;
height:90%; /*100%;*/
left: 4.55%;
opacity:0;
/*pointer-events: none;*/
animation:flowSlides 40s infinite;
}
/* 個々のスライド・現スライド標示ボタン */
.pic {
position: absolute;
width:100%;
height:100%;
}
.pic img:nth-child(1) { width:90.9%; margin-left:4.55%; }
.pic img:nth-child(2) { width:3%; bottom:-8.5%; /*2.5%;*/ }
/*表示スライドをphotosの中に横並びで一列に並べる*/
#photo1 { left: 0; }
#photo2 { left: 660px; }
#photo3 { left: 1320px; }
#photo4 { left: 1980px; }
#photo5 { left: 2640px; }
/* 写真の下に現スライド標示ボタンを配置 */
#photo1 img:nth-child(2) { position:absolute;left:40%;width:3%; }
#photo2 img:nth-child(2) { position:absolute;left:43%;width:3%; }
#photo3 img:nth-child(2) { position:absolute;left:46%;width:3%; }
#photo4 img:nth-child(2) { position:absolute;left:49%;width:3%; }
#photo5 img:nth-child(2) { position:absolute;left:52%;width:3%; }
/*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
/* 左右送りボタン */
#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#next2:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#next3:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next4:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#next5:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
/* 初期スライドショー */
@keyframes flowSlides {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides2 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides3 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides4 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
@keyframes flowSlides5 {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
18% { left:0px; opacity:1; }
20% { left:0px; opacity:0; }
20.01% { left:-660px; opacity:0; }
22% { left:-660px; opacity:1; }
38% { left:-660px; opacity:1; }
40% { left:-660px; opacity:0; }
40.01% { left:-1320px; opacity:0; }
42% { left:-1320px; opacity:1; }
58% { left:-1320px; opacity:1; }
60% { left:-1320px; opacity:0; }
60.01% { left:-1980px; opacity:0; }
62% { left:-1980px; opacity:1; }
78% { left:-1980px; opacity:1; }
80% { left:-1980px; opacity:0; }
80.01% { left:-2640px; opacity:0; }
82% { left:-2640px; opacity:1; }
98% { left:-2640px; opacity:1; }
100% { left:-2640px; opacity:0; }
}
CSSのポイント説明
・スライドは、水平に並べ帯状になるようにする。・スライドショーは、スライドを8秒間隔のFadeIN_OUTで切り替えるタイプで、切り替え時に素早く表示位置に水平移動させている。
・送りボタン、切換えボタンは、クリック時に目的のスライドからスライドショーが再開始されるように、スライドショーで使うanimationを共有している。
・現スライド標示ボタンは、個々のスライドに配置されたボタンが、スライドと一緒に移動し、相当する切換えボタンの位置に配置される。
・写真やボタン類の配置位置は％指定になっているので、使用する写真サイズ、デザインによって調整を必要とする。
・切換えボタンが#photosの下層になっていて、クリックに反応しないので、#photosのcssにpointer-events: none;を記述して反応するようにしている。また、送りボタンには、pointer-events: auto; を記述してクリックに反応するようにしている。
ゆきちさんから、各スライドにリンクを貼りたいというご質問を受けました。
このサンプルでは、スライド下の切換えボタンのクリックを有効にするため、スライド格納DIVに pointer-events: none; を指定していて、a タグを付加してもクリックが無効になっているため、リンクが作動しません。
これを解決するため、cssの記述を変更しました。
上の、本サンプル用CSSに変更点を示しましたので、リンクを貼る場合には、参考にしてください。
スライドする画像を7枚に増やしたいのですが、
どうすれば良いのでしょうかm(_ _)m
お手数をお掛けしますが、何卒ご教授くださいませm(_ _)m
・htmlのr、back、next、lbなどについて、すべて、6、7を追加記述します。
・#photo6,#photo7についても、#photo5にならって追加記述します。
・cssについても、#photo6,#photo7をはじめ、r、back、next、lbの6,7の記述を追加します。
・animationについては、totalで、7*8=56sにします。
・5枚の時は、100%/5=20%区切りでスライドを切り替えますが、7枚の時は、100%/7=14.3%区切りとなります。
・14.3%の前後で、opacityを0,1で切り替えて、fade効果を出します。
（5枚の時を参考にして、設定してください。）
ありがとうございます！
ただ、@keyframes flowSlidesここの規則性が難しく、なかなか上手くいきません(;o;)
ここだけでもご教授いただけないでしょうかm(_ _)m
お願い致します。
記述が長くなりますので、他の記述を含めて、以下のページに示しました。
「http://css.programming.jp/pages/allinoneslider_slide7.html」
「」を外してaddress欄に貼り付けてください。
ご活用ください。
今、3つに減らそうと頑張っているのですがすべて減らしても3枚目のアニメーションから存在しない4枚目に行ってしまいます。詳しい方よければ教えてください。
おれんじさん、こんばんは。
３つに減らそうとする場合、スライド関係のhtml、cssを3つに減らすことはもちろんですが、animationの中身も変えないといけません。
@keyframes flowSlides { の中の記述は、5枚用に記載されています。すなわち、２０（100/5）％刻みでスライドが切り替わるように設定されています。おれんじさんは３枚でやろうとしているわけですから、３３％刻みで設定しないといけません。２０％の例にならって、記述してみてください。
オールインワン型を実装したくて、こちらのサイトを見つけてとても助かりました！
ところで1点質問なのですが、
「マウスオーバーしている時は、スライダーが止まる」
という動作は可能でしょうか。
恐れ入りますが、教えていただけると助かります。
よろしくお願いいたします。
weeknight様
すみません。コメントを見過ごしていました。
遅くなりましたが、cssに以下を追加してください。
#photos:hover {
cursor:pointer;
animation-play-state:paused;
}
お世話になります、tyosbb様。
上記のテキストをcssに加えてみましたが
ポーズ状態になりません。
記入箇所が、悪いのでしょうか？
カーソルが手のひらになりますか。
なっていなければ、CSSに不具合があります。
もし、pointer-events: none; が記入されていれば、削除してください。
記入個所は、どこでもいいですが、#photosの下にでも記入してください。
ピンバック: 広告代理店が知らないDFPというツール
初めまして。
こちらのサイト、すごく助かりました。
あとお伺いしたいのですが、FTTPサーバーなどにCSSを名前で保存した場合は、
HTMLには追加は必要でしょうか？
初心者になりますため、初歩的な質問かもしれませんが、ご回答頂けましたら幸いです。
totoさん、はじめまして。
CSSを外部ファイルにしてサーバーに上げた場合は、
HTMLのhead内に、<link href="ファイルのある場所/ファイル名.css" rel="stylesheet" type="text/css" />
と、記述して参照しておけば、HTML内には追加する必要はありません。
参考になります。ありがとうございます。
８秒間隔だと長いので６秒にしたいのですが、どこを変えればよいのでしょうか？
よろしくお願いいたします。
genjoさん、こんばんは。
cssで、
トータルの時間40sを全て30sに代えます。
animation-delayが8秒間隔になっていますが、6秒間隔に代えてください。
例えば、8sを、6sに、32sを24sに。
これで、OKです。
ありがとうございました。これでやってみます。
JSを使わないスライダーを探していました。
すごく助かりました！
質問なのですが、スマホのブラウザではコンテナは表示されるのですが、画像が表示されないブラウザーがありました。どのようにすれば表示できるようになりますでしょうか？
※スマホのクロームでは問題なく画像が表示されました。
okiさんこんにちは。
早速ですが、androidのブラウザではおっしゃる通り画像が表示されませんね。
左右移動型やフェイドイン型などでは正常に表示されますが。
今直ちに検討に入れないのですが、CSSの一部が対応していないのではないかと思います。
CSSで心当たりを当たっていただくか、フェイドイン型などをお使いいただけないでしょうか。
こちらで解決いたしましたら、またお知らせします。
tyosbbさん
早速の返信ありがとうございます。
レスポンシブバージョンがあることに気づきませんでした！
レスポンシブバージョンを使ってみます。
ありがとうございました！！
okiさん。
調べた範囲では、animationが作動していません。opacity:0のまま止まっているようです。なぜ、このファイルでanimationが作動しないのかは、今の段階では謎です。
レスポンシブバージョンで代替可能なら、それでお願いします。
スライド7枚・オールインワン型は探していて、こちらのサイトを見つけてとても助かりました！
質問なのですが、オンラインショップのヘッダーに実装するとトップページから検索窓、商品ページからカートボタンが消えてしましました。
/*全ラジオボタンを非表示に*/
input {
display: none;
が原因なのですが、何かいい方法ないでしょうか。よろしくお願いしますm(_ _)m
確かに、その現象は起こります。
input { display: none; } を削除し、
#r1,#r2,#r3,,,,,, {
display:none;
}
のように、ラジオボタンのidすべてについて、cssで display:none; としてください。
初心者質問すみません！
htmlはindex.htmで良いと思いますが、cssはなんていうファイル名でどこに置いたらいいのでしょうか？
html内に参照してるファイル名(*.css)がないので…
ほんと、ド初心者ですみません！
まーさん。はじめまして。
例えば、cssをanimation.cssと言うファイルに書き込んで、
htmlと同じディレクトリーに置いたとしますと、
htmlのhead内に、<link href="animation.css" rel="stylesheet" type="text/css" />
と、記述します。
cssの記述方法について、google検索して、勉強することをお勧めします。
はじめまして、ここのサイトにたどり着け勉強させていただいています、ありがとうございます。
コピペしてみたのですが写真の下の丸いボタンが、なぜか四角い形のものになってしまいます、直す方法教えていただけるとありがたいのですが、よろしくお願いします。
nabeさん、はじめまして。
下の丸いボタンは、btn_1.gif（ここではimagesフォルダにある）が表示されていて、各スライドが移動すると、そのスライドと行動を共にするbtn_2.gifが、該当位置に表示されます。
すなわち、背景色と同じ色の四角の中に、○を描いた画像を2種類用意して、表示させるようにしてください。
こんなに早くお返事をいただき、ありがとうございます。初歩的な質問に親切に対応してくれて助かりました、うまく表示されるようになりました。またご相談によらせていただいても、よろしいでしょうか？よろしくお願いします。
うまく表示されるようになって良かったですね。
何時でも何かありましたら、どうぞ遠慮なく質問してください。
「背景色と同じ四角の中に…」という文章が２日がかりで理解できました。
ありがとうございました。
はじめまして、HPを作る際スライドを作りたかったので参考にさせていただいてます。
ちょっと不具合を見つけまして、自力で解決しようと思ったのですがどうしていいかわからず…。
そこで少しお力を借りたいと思い、コメントさせていただきました。
それで不具合の内容なんですが、
たとえばflowSlides3(以下③)で戻るボタンをクリックするとflowSlides2(以下②)に切り替わるじゃないですか。
その後、自動で②に遷移させた際、再び戻るボタンを押しても①に戻れないんです。
①→手動で②→自動で③→手動で②(ここで遷移できない)
—ここからは意味がわからなかったら飛ばしてもらって結構です。—
この原因を私なりに考えてみたところ、自動と手動とで遷移の仕方が違うから不具合が生じてしまうということがわかりました。
恐らく自動の場合はflowSlideの枠組みを切り替える(②→③)のではなく、②のままただ横に画像が動いているんだと思うんですよね。(②の0px、②の660px、②の1320px…といった具合に)
戻るや次へのボタンを押した場合は②という枠組みから③という枠組みに遷移してます。(②の0px→③の0px)
だから②に戻ろうとしても、この枠組み自体が②という同じ枠組みだから戻れない。
—————————————————
…伝わりましたでしょうか？
とりあえず不具合の確認だけでもしていただけたらな、と思います。
長文となってしまい、申し訳ございません。
もしよろしければ修正のほど、ご一考ください。
補足です。
②の660px→③の0pxへの遷移はできますが、②の660pxから②の0pxへの遷移はできないということです。
文章の上だとどうしても説明しづらいものでややこしくて申し訳ございません。
kkさん、ご指摘ありがとうございます。
確かに、おっしゃる通り不具合がありますね。
css animationが進行中に、ボタンクリックなどで、そのanimationを制御することができないことから起きているものと思われます。
対策を考えているのですが、今のところ思いつきません。javascriptで制御するしかないようにも思います。
今、立て込んでいますので、余裕ができたらじっくり考えたいと思います。
早急な返信ありがとうございます。
とりあえずはもう一度修正方法を自分で模索してみようと思います。
お忙しいところ申し訳ございませんでした。
お邪魔します。自動スライドが始まると、スタート地点にダイレクトで戻れないということでしょうか？
そういうことではありません。
クリックして確認してください。
お世話になりますtyosbb様。例えば２つ目のボタンから自動スライドが始まると、２番目のボタンが反応しないのです。他のボタンも同じ様です。始まったボタン以外は、反応します。
そうなんですね。
現在進行中の@framesを、進行中のボタンクリックでは制御できません。
致命的な欠陥ではないと思いますが、cssの限界かなとも思います。
どなたかいい知恵はないでしょうか。
お世話になります、tyosbb様。同じことで恐縮ですが、複数画像移動型スライダー(2)スライドショー、位置表示ボタン付きにおいて、任意のボタンを押下して自動スライドさせると、その位置に直接戻れない症状が起こるとともに、ボタンの色が他のボタンの色と相違しているようなので、戻れない何らかの状態になっていると思われます。tyosbb様の仰るように、致命的な症状ではありませんので、どうにかしていただきたいものではありません。余計なことを申し上げすみません。
ご指摘のように戻れないので、色を薄くしてクリック不能をわかるようにしています。
現状では、ほかのボタンを押して他に移り、再び目的のボタンを押してもらうほかはありません。