サンプル（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様の仰るように、致命的な症状ではありませんので、どうにかしていただきたいものではありません。余計なことを申し上げすみません。
ご指摘のように戻れないので、色を薄くしてクリック不能をわかるようにしています。
現状では、ほかのボタンを押して他に移り、再び目的のボタンを押してもらうほかはありません。
こんにちは、はじめまして。
スライド下のボタンを画像サムネイルにして
3列の二行に表示したいのですが
可能でしょうか。
こんにちは。
もちろん可能です。
実際には、作って確認していませんが、以下の様にしてください。
１．3*2の6枚ということですね。枚数を増やすには、コメント2番目の、でぃずさんの質問に答えていますので、参考にしてください。
２．サムネイルは、表示切換えボタンの記述を変更してください。
HTML: <label for="r1" id="lb1" class="circ"><img src="images/btn_1.gif"></label>
btn_1.gif の代わりに、６通りのサムネイルのファイル名にします。
CSS: #lb1 img { left: 40%;width:3%; } サムネイルがうまく並ぶように、left、widthにtopを加えて調節してください。
３．表示されているスライドのサムネイルを認識できるようにするには、サムネイル画像にアンダーラインを引きなどの別サムネイル画像を用意し、各スライドの、
<img src="img2/1.jpg"><img src="images/btn_2.gif"> のbtn_2.gif部分に記述してください。
以上でできるはずですので、ご検討ください。
初心者です。
画像を3枚に設定したところ、ボタンを押して左右にスクロールできなくなりました。
どうぞよろしくお願いいたします。
/* 左右送りボタン 消すと左右に送れなくなる*/
#back1:checked ~ #photos { animation:flowSlides3 30s infinite; animation-delay:-12s; }
#back2:checked ~ #photos { animation:flowSlides1 30s infinite; animation-delay: 0s; }
#back3:checked ~ #photos { animation:flowSlides2 30s infinite; animation-delay:-86s; }
#next1:checked ~ #photos { animation:flowSlides2 30s infinite; animation-delay:-6s; }
#next2:checked ~ #photos { animation:flowSlides3 30s infinite; animation-delay:-12s; }
#next3:checked ~ #photos { animation:flowSlides1 30s infinite; animation-delay:-18s; }
/* 初期スライドショー 消すとスライドされない*/
@keyframes flowSlides {
0% { left:0px; opacity:0; }
2% { left:0px; opacity:1; }
31% { left:0px; opacity:1; }
33% { left:0px; opacity:0; }
33.01% { left:-660px; opacity:0; }
35% { left:-660px; opacity:1; }
64% { left:-660px; opacity:1; }
66% { left:-660px; opacity:0; }
66.01% { left:-1320px; opacity:0; }
68% { left:-1320px; opacity:1; }
98% { left:-1320px; opacity:1; }
100% { left:-1320px; opacity:0; }
画像を3枚にして、切り替え時間を6秒にしたいということですね。
まず、animationのトータル秒数は、30sではなく18sになります。
back3のdelayは、おそらくタイプミスでしょうが-6sです。
全体のHTMLとCSSが分からないので、試してみてはいませんが、
まずは以上を修正してみて下さい。
いつもお世話になります、オールイン型スライダーを使用させていただいております。
以前質問させていただき、わかりやすく教えていただき助かりました。
今回の件は今までウインドウズ7を使用していて気づかなかったのですが、10に移行して
気づきまして、スライダーで絵が切り替わるときに一度消えてまた同じ絵が出てから次の絵に
変わるようになってしまいました、以前の様にスムーズな切り替えに直したいのですが、どこかの
数値を変えればよろしいのでしょうか？お忙しい所すみません、手の空いた時にでも教えていただけ
るとありがたいです。よろしくお願いします
こんにちは。
Windows7、10でanimationが影響されることはないはずです。
<a href="http://maru1sun.net/のスライダーを見る限りでは、正常に動いていますね。" rel="nofollow ugc">http://maru1sun.net/のスライダーを見る限りでは、正常に動いていますね。</a>
お尋ねの現象は、各スライド全てに起こるのでしょうか?
ちょっと考えにくいですね。
もう一度、css、特に秒数のところを見直してみてください。
異常なく動いていますか？スライドすべてにおこってしまいますので、もう一度
記述を確認してみます。急な問い合わせに付き合っていただきありがとうございました。
はじめまして。初心者です。
こちらのオールインワンタイプが今作っているHPのイメージ通りだったのでコピペさせていただきましたが、わからない事だらけになりすみませんが質問させてください。
まずそのままコピペした段階ではスライド写真と送りボタンが出ず、スライド表示ボタンが"？"になったので
HTMLのスライド表示ボタンとスライド写真のところを自分のに書き換えました。スライドボタンは上手く表示されましたが、スライド写真は何も表示されません。
送りボタンが出ているであろうところにポインターを持っていくと手の形になるので何かしらある気配はありますが表示がなされません。
CSSでstageの色やサイズをいじってみたり、スライド写真のサイズを表示したいサイズ（少し大きめ）にいじってみたりしますが、やはり送りボタンとスライド写真が表示されず途方に暮れてしまいました。他の数値を変えるべきなのでしょうか。
ど素人のためこれ以上進めずにおります。よろしくお願いします。
昨日はずっとSafariで試していたら表示されなかったもので上記の質問投稿をさせていただきましたが、今朝になってFirefoxでやってみたら表示されていました。お騒がせしてすみません。その為質問が変わりますがSafariでは表示されないのでしょうか？
kojiyamaさん、初めまして。
当サイトは、Safariでも表示されます。ただ、http://のサイトを受け付けないような設定になっているのではないでしょうか。
さて、本題ですが、送りボタンが表示されないのは見当も尽きません。コピペしているのなら問題ないはずですが、送りボタンの ＜ は、全角ですのでご確認ください。
スライドが表示されないのは、
のimg2やimagesは、スライドやボタン画像が入っているフォルダです。このフォルダ名が、kojiyamaさんがスライドなどを入れているフォルダ名と一致しているかどうかご確認ください。
早速のご返信ありがとうございます。
送りボタンやスライドはFirefoxではしっかりとすぐに反映され、おかげ様でイメージ通りに上手くいきました。
しかしSafariではしばらくしてから一枚目のスライド画像だけ表示され、二枚目以降に移動しません。送りボタンも左のボタンは表示されておりますが、右の送りボタンが表示されていません。stage全体もFirefoxで表示される位置よりも少し右にずれてしまって画面全体のバランスが悪く、スライドボタンも現表示ボタンだけずれて表示されている状態です。
単にパソコンとSafariの相性の問題なのでしょうかね？？FirefoxとSafariでこうも違うものかと驚いております。他のブラウザでも試せるようなら試してみます。
safari 向けには、接頭辞が必要です。
今のコードに加えて、
animation は、-webkit-animation に、
@keyframes は、@-webkit-keyframes とした記述を加えてください（全て）。
ありがとうございます！
教えて頂いた通りにCSSに-webkit-を足したらsafariでも上手くいきました！
最近はベンダープレフィックスの必要な場合も記述を省略していますので、わかりにくくてすみませんでした。
すみません！Safariで上手くいったと思っていたら、今度は上手くいっていたはずのFirefoxが
”一枚目のスライド画像だけ表示され、二枚目以降に移動しません。送りボタンも左のボタンは表示されておりますが、右の送りボタンが表示されていません。stage全体もFirefoxで表示される位置よりも少し右にずれてしまって画面全体のバランスが悪く、スライドボタンも現表示ボタンだけずれて表示されている状態”になってしまっていました。FireFoxでも試してから先ほどのコメントを書くべきでした。すみません。
Safariに合わせたからFirefoxでの表示がおかしくなったということは、両方のブラウザで同じように表示されるようには出来ないのでしょうか？？
そんなはずはありません。safariもfirefoxもその他ブラウザも正常表示されます。
safari用に編集した時に、従来の記述が崩れている可能性があります。良く見直してください。
あれから-webkit-をつける前のものを再度いろいろいじっては元からやり直したりをやってみていますが、やはりsafariでうまくいくとFirefoxではおかしくなります。webkitについても知らなかったので調べてみましたが、私のMacのOSが古いが為におかしいな表示になっているという事はありますか？ど素人ですみません。ちなみにMacOSXバージョン10.8.5です。古いと怒られそうですね（汗）
ちなみに今Chromeをダウンロードして見てみたらwebkitをつける前もつける後も両方ちゃんと見られました。自分の古いsafariは無視してwebkitは付けない版で進めて見ようかと思います。
1024×764のスライド画像を使用して、最大そのサイズで表示したいのですが、どこを変えたら良いですか？
宜しくお願いいたします。
ここの例では、スライド幅が660pxとなっています。
1024px幅の写真の表示には、したがって、660の代わりに、1024を記述し、660の倍数は1024の倍数を記述します。
例えば、
#photo1 { left: 0; }
#photo2 { left: 1084px; }
#photo3 { left: 2168px; }
#photo4 { left: 3252px; }
#photo5 { left: 4336px; }
と言うような記述です。
#stageや@frames内など、660関係の記述は全部変えてください。
送りボタンの位置などは微妙に修正が必要かもしれません。
以上ご検討ください。
初めまして。初心者で、HTML,CSSのみしか知らず、それだけで動くスライドショーをいろいろ探しているときにこちらを見つけました。
画像サイズをwidth:320px,height:autoの画像を差し込んで使いたいのですが、画像を中央にする方法がわかりません…text-align:centerを.picに入れたり、画像自体にクラスを作りtext-align:centerを入れたりしてもうまくいかず…ほかのところも一つ上のTYさんの質問をみたりで変えてみたりしているのですが、うまくいきません。
まだ質問を受け付けているかわかりませんがどうかよろしくお願いいたします！
追記：stageidのサイズ変更などしたらいい感じになりそうかな…というのはわかってきたのですが、どう変えていったらいいのかがやはり難しく思っています。
元画像は1：1.5ほどで320*480ぐらいで考えています。
ymさん、はじめまして。
まず、CSSの冒頭の部分にある、#top_beltと、#stageの、max-widthを320pxに変えてください。さらに、HTMLの最後の部分を、<div style="padding:72%;"></div>のように、％値を高さがうまく表示されるように調整してください。
これで、320*480の画像が画面中央に表示さるはずです。ボタンの大きさ、位置は好みに応じてサイズを調整してください。画面中央に表示さるようにするには、CSSで#stageの margin: 0 auto; を記述することで可能となります。
なお、画面の任意の位置にこのスライダーを配置したい場合は、#stageをDIVの中に入れ、そのDIVの配置をCSSで調整してください。
ありがとうございます！試してみたところ成功しました！
中央に寄ってくれて、画像もいい感じになりありがたいです！
それを経てのさらに質問になってしまうのですが、下のgif画像の位置を調節したいのですが、どこを調整するとよいのでしょうか？変更するとあらぬ位置に飛んで行ってしまったりするのでご教授ください。よろしくお願いします。
縦位置は、cssの .circ img で、横位置は、#lb1 img { left: 40%;width:3%; } で調整してください。
失礼いたします。
参考にさせていただきておりますが、
オールイン型にスライドごとにコメントを入れるにはどうしたらよろしいでしょうか。
けろさんはじめまして。
簡単なのは、画像加工ソフトを使って、スライドごとに、コメントを書き込むことですが、
本サイトの、「フェイドイン・アウト型スライドショー（テロップ入り）」
<a href="http://css.programming.jp/?p=581" rel="ugc">http://css.programming.jp/?p=581</a>
の手法を使って、コメントを流す方法もあります。
コメントを流さず固定したい場合は、.pic span { 内の記述のanimation 部分を削除し、コメント挿入位置を指定してください。
以上、ご検討ください。
ありがとうございます。
おかげさまで
画像のサイズ変更、スライド数の変更、スライド時間の変更、文字を出すのに成功しました。
今度は、
画面の大きさに応じてフォントサイズ変更（これは簡単だと思う）、ボタンの色やサイズを変えやすくするためボタンをテキストで実装する、を挑戦したいと思います。
あと、前の方にあったマウスオーバーで止めるのですが、ブラウザでエッジを使い、画像をダブルクリック（画像が選択されて青くなる）したあとに、画像の青色を解除しても、マウスオーバーしても画像が止まらなくなるのですが、こちらは何か対策がございますでしょうか？
エッジの件ですが、画像をダブルクリックする意味が分かりませんし、ダブルクリックしても、私が試したところ、青い選択状態になりません。
けろさんがおっしゃる現象が起きたとしても、何が起こっているかがわかりませんので、私には、解決策が思い浮かびません。
以上が、現時点でのお答えになりますので、ご容赦ください。
私の使っているエッジは、
バージョン 104.0.1293.70 (公式ビルド) (64 ビット)
ご回答いただきありがとうございます。
今、家でテキストに直打ちして試したところ全く症状は出ませんでした。
CMS、タグを閉じ忘れている、他のCSSのどれかが影響しているかもしれません。
そうでしたか。
css関連、その他、レベルの高い方のようですので、引き続きご検討ください。
ありがとうございます。
勉強を始めて１か月足らずで、人様のものをコピーして加工する程度です。
自分で一から作るのはまだまだできません。
スライダーボタンをが画像で設定する理由がよくわかりました。
文字で作ると縮尺設定、●の合わせをシビアにするか、未選択の●をけさなければならないので、かなり面倒ですね。
アニメーションの停止ですが、●や＜や＞を一度押すと停止が効かなくなるようです。
いろんな所に:hoverを付けましたが停止しません。
何か良い手段はありませんでしょうか。
複数のanimationが同時進行すると、特定のanimationの制御が大変難しいことになります。
この場合、ボタンクリックで、新しいanimationが動き出しても、もとに動いているanimationの制御では、新しいものにはききません。
したがって、以下の記述を加えてみてください。
#r1:checked ~ #photos:hover { animation-play-state:paused;}
#r2:checked ~ #photos:hover { animation-play-state:paused;}
#r3:checked ~ #photos:hover { animation-play-state:paused;}
#r4:checked ~ #photos:hover { animation-play-state:paused;}
#r5:checked ~ #photos:hover { animation-play-state:paused;}
backやnextボタンそれぞれについても記述が必要です。
ご検討ください。
ありがとうございます。
明日、試してみたいと思います。
ありがとうございます。
すべての状態で止まるようになりました。
いろいろいじって満足いく感じになりました。
画像スライダーを参考にCSSの勉強がかなりできました。
頑張りましたね。
引き続き、当サイトをご活用ください。