※このサンプルでは、戻りボタン（＜）をクリックすると、スライドショーの移動方向が左方向（スライドが左から登場）に切り替わる。移動方向を常に右方向にするサンプルは、「スライダー/左右移動型２(レスポンシブ)」に掲載した。
レスポンシブ対応左右移動型スライダーのサンプル
本サンプル表示用ＨＴＭＬ
<div id="stage">
<input type="radio" id="back1" name="gal">
<input type="radio" id="back2" name="gal">
<input type="radio" id="back3" name="gal">
<input type="radio" id="back4" name="gal">
<input type="radio" id="back5" name="gal">
<input type="radio" id="next1" name="gal">
<input type="radio" id="next2" name="gal">
<input type="radio" id="next3" name="gal">
<input type="radio" id="next4" name="gal">
<input type="radio" id="next5" name="gal">
<div id="photos">
<div id="photo0" class="pic"><img src="img2/5.jpg">
</div>
<div id="photo1" class="pic"><img src="img2/1.jpg">
<label for="back1"><div id="left1" class="b_left"><span>＜</span></div></label>
<label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo2" class="pic"><img src="img2/2.jpg">
<label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>
<label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo3" class="pic"><img src="img2/3.jpg">
<label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>
<label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo4" class="pic"><img src="img2/4.jpg">
<label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>
<label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo5" class="pic"><img src="img2/5.jpg">
<label for="back5"><div id="left5" class="b_left"><span>＜</span></div></label>
<label for="next5"><div id="right5" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo6" class="pic"><img src="img2/1.jpg">
</div>
</div>
<div style="padding:28%;"></div>
</div>
ＨＴＭＬのポイント説明
・htmlは、以前稿「スライダー（FadeIN・Out 型）」と全く同じであるが、#frame は必要ないので省略している。・#stage内の最終行に、
<div style="padding:28%;"></div>
を挿入している。これは、全ての div に高さ指定がないため、表示領域の高さを確保するために記述していて、overflow:hidden; の対象領域を確保し、スライダー下部に配置された要素をスライダーの下に表示させるようにさせるものである。
本サンプル表示用ＣＳＳ
/* 表示画面 */
#stage {
position: relative;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの animation を設定*/
#photos {
position:absolute;
top:0;
width:100%;
animation: imgPassToLeft0 30s infinite;
-webkit-animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo1, #photo2, #photo3, #photo4, #photo5 */
#photo0 { left: 0%; }
#photo1 { left:100%; }
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
.pic { position:absolute;top:0;width:100%; }
/*写真サイズを可変に*/
.pic img { width:100%; }
/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
display: none;
}
/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
position: absolute;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 40px;
font-weight: bold;
opacity:0;
top: 40%;
color:#EEE;
}
.b_left span {
left: 5%;;
}
.b_right span {
left: 85%;
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
opacity:1;
color:#EEE;
}
.pic label div span:hover {
color:#f00;
cursor:pointer;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
animation: imgPassToLeft1 30s infinite;
animation-delay: -4.8s;
-webkit-animation: imgPassToLeft1 30s infinite;
-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {
animation: imgPassToLeft2 30s infinite;
animation-delay: -10.8s;
-webkit-animation: imgPassToLeft2 30s infinite;
-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
animation: imgPassToLeft3 30s infinite;
animation-delay: -16.8s;
-webkit-animation: imgPassToLeft3 30s infinite;
-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
animation: imgPassToLeft4 30s infinite;
animation-delay: -22.8s;
-webkit-animation: imgPassToLeft4 30s infinite;
-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
animation: imgPassToLeft5 30s infinite;
animation-delay: -28.8s;
-webkit-animation: imgPassToLeft5 30s infinite;
-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
animation: imgPassToRight1 30s infinite;
animation-delay: -28.8s;
-webkit-animation: imgPassToRight1 30s infinite;
-webkit-animation-delay: -28.8s;
}
#back2:checked ~ #photos {
animation: imgPassToRight2 30s infinite;
animation-delay: -22.8s;
-webkit-animation: imgPassToRight2 30s infinite;
-webkit-animation-delay: -22.8s;
}
#back3:checked ~ #photos {
animation: imgPassToRight3 30s infinite;
animation-delay: -16.8s;
-webkit-animation: imgPassToRight3 30s infinite;
-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
animation: imgPassToRight4 30s infinite;
animation-delay: -10.8s;
-webkit-animation: imgPassToRight4 30s infinite;
-webkit-animation-delay: -10.8s;
}
#back5:checked ~ #photos {
animation: imgPassToRight5 30s infinite;
animation-delay: -4.8s;
-webkit-animation: imgPassToRight5 30s infinite;
-webkit-animation-delay: -4.8s;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft1 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft2 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft3 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft4 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToLeft5 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@keyframes imgPassToRight1 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight2 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight3 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight4 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@keyframes imgPassToRight5 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@-webkit-keyframes imgPassToLeft0 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft1 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft2 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft3 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft4 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft5 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
}
@-webkit-keyframes imgPassToRight1 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@-webkit-keyframes imgPassToRight2 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@-webkit-keyframes imgPassToRight3 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@-webkit-keyframes imgPassToRight4 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
@-webkit-keyframes imgPassToRight5 {
0% { left:-500%; }
16% { left:-500%; }
20% { left:-400%; }
36% { left:-400%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-200%; }
76% { left:-200%; }
80% { left:-100%; }
96% { left:-100%; }
100% { left:0%; }
}
ＣＳＳのポイント説明
以前稿「スライダー（スライドショー＆ボタン送り）」からの変更点を中心に記述 ・#stageのwidth指定を、max-width に変更・すべての div の高さ指定を排除し、幅は、100%に指定
・#photos のwidth指定を、4200px（写真7枚分）から、100%（同1枚分） に変更
・各写真を格納している、#photo0,,,を、position absolute のtop:0、left指定で、横一列に並ぶようにした。
・送りボタン、animationの設定は、全て以前稿通り。
初めまして、こちらのページをHP作成の参考にさせて頂きました。
丁寧な説明のお蔭で５枚の写真をスライドすることが出来ましたが、１つ不具合があり困っています。
５枚目から１枚目へスライドする際一瞬バツ印が出てしまいます。
何か解決方法はありませんでしょうか。
ちなみにFC2ブログの[ basic_white ] というテンプレートに組み込んで作成しています。
ご助言頂けましたら幸いです。
よろしくお願い致します。
yyyさん初めまして。
バツ印とはどのようなものでしょうか?
画面全体に出るのですか?
もしかして、
<div id="photo6" class="pic"><img src="img2/1.jpg">
のところ、/6.jpgになっていませんか？
さっそくのお返事ありがとうございます。
バツ印はスライド時左上に小さく表示されます。一瞬です。
例えとしてはと記述してもパスが正しくないと画像が表示されないときのようなバツ印、です・・・伝わりますでしょうか；
ただ、今回ブログで作成しておりますのでパスの問題はないのです。
画像挿入の手順としては
・ブログに画像をアップロードし画像のURLを取得
・ブログテンプレートの編集画面で書き換え
試しに同じ画像を"photo0"以外に画像を記述してみると正しく表示されるので、画像のURLも正しく取得出来ています。何かが悪さをしていると思うのですが・・・何か検討は尽きますでしょうか。
よろしくお願い致します。
先の返事で、もしかしての後が消えていましたが、
photo0は5.jpg、photo6は1.jpgと同じですが、これは間違えていないでしょうか。
ブログの本スライダーをのせたURLを教えていただければ、わかると思いますが。
再度に渡るお返事ありがとうございます。
原因はご指摘して頂いた通りでした；
先ほど直してみましたところ、綺麗にスライドされました！
ありがとうございました。大変助かりました。
どういたしまして。
ご活用ください。
Cool! That's a clever way of loiknog at it!
Great thanks.
初めまして、スライダー参考にさせていただいております。
一点ご質問なのですが、４枚の写真をスライドするため、コードをいじったのですが、不具合が出てしまっております。
4枚目から１枚目へスライドする際に引っかかりみたいなのが出てしまい、綺麗にスライドができません。。
解決方法をご教授頂ければ幸いでございます。
どのようにコードをいじったのかわかりませんので、お答えのしようがないのですが、4枚の場合、photo0-photo5までの記述となり、photo5は1.jpgとなります。
animationでは、４等分ですから、20%ではなく25%刻みになり、left:500%以上の記述は必要ありません。
以上を参考に検討ください。
早いご返信ありがとうございます！！html部分ですが、以下で書き換えているのですが間違えないでしょうか？
＜
＞
＜
＞
＜
＞
＜
＞
以下のアニメーション部分がどうしても25%刻みにできないのですが、こちらもご教授いただければ幸いです。
0% { left:-100%; }
16% { left:-100%; }
20% { left:-200%; }
36% { left:-200%; }
40% { left:-300%; }
56% { left:-300%; }
60% { left:-400%; }
76% { left:-400%; }
80% { left:-500%; }
96% { left:-500%; }
100% { left:-600%; }
コードを書き換える部分は以上の2点でよろしかったでしょうか？大変お手数で申し訳ないですが、よろしくお願いいたします。
html部分がなぜか消えてしまいました。
＜
＞
＜
＞
＜
＞
＜
＞
記入できないようです、、複数回もすいませんでした！
以下を参考にしてください。
HTML:
<div id="stage">
<input type="radio" id="back1" name="gal">
<input type="radio" id="back2" name="gal">
<input type="radio" id="back3" name="gal">
<input type="radio" id="back4" name="gal">
<input type="radio" id="next1" name="gal">
<input type="radio" id="next2" name="gal">
<input type="radio" id="next3" name="gal">
<input type="radio" id="next4" name="gal">
<div id="photos">
<div id="photo0" class="pic"><img src="img2/4.jpg">
</div>
<div id="photo1" class="pic"><img src="img2/1.jpg">
<label for="back1"><div id="left1" class="b_left"><span>＜</span></div></label>
<label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo2" class="pic"><img src="img2/2.jpg">
<label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>
<label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo3" class="pic"><img src="img2/3.jpg">
<label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>
<label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo4" class="pic"><img src="img2/4.jpg">
<label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>
<label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo5" class="pic"><img src="img2/1.jpg">
</div>
</div>
<div style="padding:28%;"></div>
</div>
<div><span>Some Description</span></div>
CSS:
@keyframes imgPassToLeft0 {
0% { left:-100%; }
20% { left:-100%; }
25% { left:-200%; }
45% { left:-200%; }
50% { left:-300%; }
70% { left:-300%; }
75% { left:-400%; }
95% { left:-400%; }
100% { left:-500%; }
}
That insight solves the premlob. Thanks!
You are welcome.
Its my great pleasure.
上記でできました！
そこで画像にリンクを貼りたいのですが
<a hrefなどしても貼れません
どうしたらいいですか？
こんこんさん、はじめまして。
以下のようにすると、指定urlに飛ぶはずです。
<a href="http://tyoshioka.com" target="_blank" rel="nofollow"><img src="img2/1.jpg"></a>
ただし、＞や＜をクリックすると、スライドが移動します。
上記の
<a href="http://tyoshioka.com" target="_blank" rel="nofollow"><img src="img2/1.jpg"></a>
はどこに書けば良いのでしょうかm(_ _)m
HTMLの、
<div id="photo1" class="pic"><img src="img2/1.jpg">
のところの、<img src="img2/1.jpg">の前後に、aタグを入れてください。
rel="nofollow" は記述不要です。（このwordpressが自動で入れているみたいなので）
返答ありがとうございます。
オールインワン型スライダーを使っており、こちらと同じようなコードでしたので、対応できるかな？？と考え、やってみたのですが、aリンクが全く反応せず困っています。
上記と通りやってみましたが、全く反応なしです。。。
オールインワン型スライダーでコメントを残すフォームが壊れていたようですので、こちらに書かせていただきました。
オールインワン型の場合は、スライドの下の小円型の指標のクリックを有効にするために、スライドを格納しているDIV(#photos)のクリックを無効にしています。（pointer-events: none;）
ちなみに、//pointer-events: none; として、再生してみてください。この場合はリンクが有効になります。
したがって、両方の機能を生かすことは現状ではできません。
小円指標を無効にして非表示にするか、スライドと小円指標を別々のanimationで動かす（DIVを分ける）かなどが考えられますが、後者については、ここでお答えできるほど簡単ではありません。
なるほど。
わかりやすいご説明ありがとうございました！
リンクを貼ることが可能になるよう、CSSを修正しました。
「オールインワン型スライダー」のコメント欄をご覧ください。
初歩的な質問ですいません。CSSで動かしたい写真の指定はどこ入れればいいですか？ライブドアブログで表示したいのですが。。。
#blog-header {
margin-bottom: 40px;
position: relative;
}
/* 表示画面 */
#stage {
position: relative;
max-width: 600px;
margin: 0 auto;
overflow: hidden;
ブログのヘッダー部分に元々書いてあるものを消して上記のCSSを張り付ければいいのですか？
村田さんこんにちは。
livedoorのブログのシステムについて調べてはいないので、はっきりお答えかねますが、
写真の指定？
―― 写真をアップロードしたアドレスを指定してください。
CSSの記述場所？
―‐（これって質問かどうかわかりませんが）
headerに表示させたいのですね。header編集画面で、CSS記述場所に記述してください。
headerにもともと書いてあるものは、レイアウト上消さないほうがいいものがあるかもしれません。コメントアウト（/*と*/で囲む）して試してみて、必要なら復活させてください。
ただし、うまく表示されるかどうかlivedoorブログの仕様にもよりますのでわかりません。うまくいかないときに、すぐ元の状態に返せるように、元のコードを保存するなどして万全を期してください。
お返事ありがとうございます。アップロードした写真のアドレスは下記の場所に指定すれば良いですか？
/*各写真の並び位置を設定
#photo1, #photo2, #photo3, #photo4, #photo5 */
#photo0 { left: 0%; }http//????
#photo1 { left:100%; }
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
.pic { position:absolute;top:0;width:100%; }
/*写真サイズを可変に*/
メインアウト試してみます。。ありがとうございます。
写真のアドレスは、HTMLに書き込みます。
<div id=”photo0″ class=”pic”><img src=”img2/4.jpg”>
の、img2/4.jpgの部分にアドレスを書いてください。
出来ました！！ありがとうございました。まだ、不慣れで四苦ハクしてます。。
ヘッダーの間がちょっと空いちゃいましたが少しずつ治してみます。。
本当に有難うございました。。
よかったですね。ホッとしました。
あとは、うまく調整してください。
Wow, your post makes mine look felebe. More power to you!
Thank you.
I need more power, as you know.
Hey hey hey, take a ganedr at what' you've done
Thank you for your comment.
ネットショップのヘッダーにcssコードと表示用ＨＴＭＬをコピーしましたが、なぜかcssコード部分はコードのまま表示されてしまいました。表示用ＨＴＭＬ部分は7枚(5枚の中に2枚が重複する)画像が表示されました。一番上の画像の↑上にいくつかのラジオボタンも表示されています。
山田さん、こんにちは。
cssが機能していませんね。cssコードは、
<style type="text/css"> と、</style> の間に記述されていますか？
いつも参考にさせていただいております。
質問なのですが、スライダーの流れを別にしようと思ってるのですがうまくいきません。全てのleftとrightをひっくり返すだけでしょうか？
あと、同じページ内に２つスライダーを作って、一つは写真4枚のスライド、もう一つは写真5枚のスライド。これを同じタイミングで動かしたいのですがうまくいきません。上記通り作ると５枚のスライドショーの方が少し早く動き出してしまいますよね？方法を教えていただけると幸いです。
tommyさんこんにちは。
今、山から帰ってきたばかりで、頭が働きませんが、以下のことを教えてください。
１．流れを別にしよう と言うことはどういうことですか？スライドショーの方向ですか？クリックした後のスライドの移動方向ですか？
２．どうやって２つのスライダーを設置しているかわかりませんが、全く別建てにすれば、同じタイミングになるような気がします。あるいは、animation-delay:の値を調整して解決しませんか？
失礼します。
サンプル表示用htmlを使わせていただきたいのですが、具体的にはどこに画像ファイルを挿入すればいいのですか？初心者すぎで申し訳ありません。
おはようございます。深夜までお疲れさんです。
画像ファイルは、htmlと同じ階層（フォルダ）でもいいですし、ここでの例のように、例えばimgと言うフォルダを作ってその中に入れてもいいです。
htmlでは、img src="img2/1.jpg" というところに、画像ファイルの所在を記述してください。
夜分遅くに申し訳ありません。
”img2/1.jpg”というところに画像のファイル名を入れましたが、スライドのボタンと写真のマークのようなものだけ表示されました。そのマークに右クリックして「新しいタブで画像を開く」をクリックすると、「ファイルが見つかりませんでした」と新しいタブに表示されました。
どうすれば画像が表示されるのでしょうか？
画像ファイルが置いてある場所と、htmlで指定している場所が違うということです。
このhtmlの場所に対して、画像ファイルはどこに置いてありますか？
OneDriveの中に入れてあります。
Mayさん
それでは、C:\Users\ユーザー名\OneDrive\公開/img2/1.jpg などと、HTMLで指定してください。
それより、HTMLのあるところに、imgフォルダを作って、そこに入れて、
img/ファイル名 と記述する方がいいと思います。
ありがとうございます。とりあえず画像は載せることができました。ですが、このページに表示されているようなスライダーになりませんでした。
具体的に書くと、
○○○○○○○○○○
画像0
画像1
＜
＞
画像2
＜
＞
画像3
＜
＞
画像4
＜
＞
画像5
＜
＞
画像6
といった感じです。
どうすればいいのでしょう？
css が機能していませんね。css の基本をまずstudy してください。
css を、<style type="text/css"> と </style> の間に記述してください。
こんにちは。jqueryでガチンコしてスライダーが動かず、CSSだけで実装できるスライダーを検索をしたら、こちらに辿り着きました。
早速実装させていただきましたが、上の方のご質問と重なってしまいますが、スライダーを2枚にしたいのですが、自動スライドの動きが遅かったり、矢印キーできちんと動かず、困っております。
サイトをロードし1枚目に出てきた画像の＞をクリックしても、次の画像に遷移しない。
＜をクリックすると何枚目かで画像が消えてしまう。
CSS————————-
/* animation設定 */
@keyframes imgPassToLeft0 {
0% { left:-100%; }
25% { left:-100%; }
50% { left:-200%; }
75% { left:-200%; }
100% { left:-300%;}
}
@keyframes imgPassToLeft1 {
0% { left:-100%; }
25% { left:-100%; }
50% { left:-200%; }
75% { left:-200%; }
100% { left:-300%;}
}
@keyframes imgPassToLeft2 {
0% { left:-100%; }
25% { left:-100%; }
50% { left:-200%; }
75% { left:-200%; }
100% { left:-300%;}
}
@keyframes imgPassToLeft3 {
0% { left:-100%; }
25% { left:-100%; }
50% { left:-200%; }
75% { left:-200%; }
100% { left:-300%;}
}
HTML————————-
<a href="#news02" rel="nofollow"></a>
<a href="#news01" rel="nofollow"></a>
＜
＞
<a href="#news02" rel="nofollow"></a>
＜
＞
<a href="#news01" rel="nofollow"></a>
お時間のあるときにでも、ご教授お願いいたします。
おはようございます。
今から出かけますので、スライドショーの部分だけお答えします。ボタン操作も間隔を12sにしてください。
以下に一例を示しました。
HTML:
<div id="stage">
<input type="radio" id="back1" name="gal">
<input type="radio" id="back2" name="gal">
<input type="radio" id="back3" name="gal">
<!?<input type="radio" id="back4" name="gal">
<input type="radio" id="back5" name="gal">?>
<input type="radio" id="next1" name="gal">
<input type="radio" id="next2" name="gal">
<input type="radio" id="next3" name="gal">
<!?<input type="radio" id="next4" name="gal">
<input type="radio" id="next5" name="gal">?>
<div id="photos">
<div id="photo0" class="pic"><img src="img2/2.jpg">
</div>
<div id="photo1" class="pic"><img src="img2/1.jpg">
<label for="back1"><div id="left1" class="b_left"><span>＜</span></div></label>
<label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo2" class="pic"><img src="img2/2.jpg">
<label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>
<label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>
</div>
<!?<div id="photo3" class="pic"><img src="img2/3.jpg">
<label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>
<label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>
</div>
<div id="photo4" class="pic"><img src="img2/4.jpg">
<label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>
<label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>
</div>?>
<div id="photo3" class="pic"><img src="img2/1.jpg">
</div>
</div>
<div style="padding:28%;"></div>
</div>
<div><span>Some Description</span></div>
CSS:
#photos {
position:absolute;
top:0;
width:100%;
animation: imgPassToLeft0 12s infinite;
-webkit-animation: imgPassToLeft0 12s infinite;
}
@keyframes imgPassToLeft0 {
0% { left:-100%; }
45% { left:-100%; }
55% { left:-200%; }
90% { left:-200%; }
100% { left:-300% }
}
なお、<はHTML記述として認識されます。＆lt;、＆gt;を使ってください。
村田様
お忙しい中、ありがとうございました。
上記、頂きましたソースとCSSで自動遷移はばっちりでした。
CSSのパーセンテージが違っていたようですね。
また、HTMLも
と3まで入れておりませんでした。
後は、＞＜での動きなのですが、
#next1:checked ~ #photos {
animation: imgPassToLeft1 30s infinite;
animation-delay: -4.8s;
-webkit-animation: imgPassToLeft1 30s infinite;
-webkit-animation-delay: -4.8s;
}
ここら辺を修正するのでしょうか。
こちらのCSSが、基本的にどのような基準で動いているのかが少々難しく、自分でカスタマイズが出来ません。
お時間のあるときに、ご教授、お願いいたします。
CSSのコードを含めて、以下のページをご覧いただいて、参考にしてください。
<a href="http://css.programming.jp/pages/slider_slide2_responsive_2slides.html" rel="ugc">http://css.programming.jp/pages/slider_slide2_responsive_2slides.html</a>
tyosbb様
こんにちは。
無事、ナビも動きました。
3枚にしたい場合も、
<a href="http://css.programming.jp/pages/slider_slide2_3slides.html" rel="ugc">http://css.programming.jp/pages/slider_slide2_3slides.html</a>
こちらを参考にさせていただき、無事完璧に動きました。
ありがとうございました！
最後に、下記スタイル部分の、%の出し方を教えていただくことは可能でしょうか。
————-
@keyframes imgPassToLeft0 {
0% { left:-100%; }
45% { left:-100%; }
55% { left:-200%; }
90% { left:-200%; }
100% { left:-300%;}
}
————-
例えば、2枚スライドの場合、
————-
0%
45%
55%
90%
100%
————-
3枚スライドの場合
————-
0%
29%
33%
62%
66%
96%
100%
————-
4枚スライドの場合
————-
0%
20%
25%
45%
50%
70%
75%
95%
100%
}
————-
このようなパーセンテージになるのはなぜなのかがどうしても分かりません。
よろしくお願いいたします。
p.s.お名前を間違えておりまして・・すみませんでした。
恥ずかしい限りです・・
完動おめでとうございます。
パーセンテージの件ですが、例えばスライドが4枚のとき、決めたトータルの時間が100%ですから、一枚に要する間隔は、25%になります。5枚のときは、100/5=20(%) となります。
FadeIN/Outをその前後に起こさせますから、法則はないのですが、感覚で%を決めることになります。
tyosbb様
パーセンテージの件、ありがとうございました。
なるほど、感覚で決めていらしたのですね。
どうしても法則が見出せず・・よく分かりました。
この度はありがとうございました。
また、いろいろ参考にさせていただきます！
どういたしまして。
今後も活用ください。
初めまして、こちらのページをHP作成の参考にさせて頂きました。
仮想のショッピングサイトで、スライダーのサイズなどを改変して利用しましたが問題ありませんでしょうか。
もしもダメでしたらご連絡ください。
ご利用いただきありがとうございます。
全く問題ありません。ご活用ください。
管理人様
サイトリニューアルの依頼を受けて、まさにこういったスライダーを探しておりました。
用途としては、理髪店ホームページのトップページに使用したいと考えておりますが、
差支えないでしょうか。
リニューアル後のサイト公開は2016年4月頭を予定しております。
こんにちは。
全く差し支えありません。ご自由にお使いください。サイズやその他の変更もご自由です。
良いサイトになりますように、ご期待申し上げます。
毎度毎度もうしわけありません、画像を5枚から10枚に増やしたいのですが・・・。
どのようにすればいいでしょうか。
増やしても増やしても6枚目で1枚目にとまってしまうようです。
誠に申し訳ございませんが、助言をお願いいたします。
こんにちは。
10枚に増やすには、HTMLの記述で、photo0からphoto11まで記述します。
photo0はphoto10、photo11はphoto1と同じ画像です。
次に、animationの記述を変更します。
totalの時間を、30sから60sに、切り替えは、5枚の時が20％刻みですが、10枚の時は10%刻みになります。スライド移動には、2%取ればいいのではないでしょうか。
以上ご検討ください。
tyosbb様
以前、お問合せをさせていただきました木村です。その節は、本当にありがとうございました。
これまで、現在、４つのサイトで４種類のスライダーを使わせていただいています。
教えていただきたいことがあります。
初めて表示したときに、ホバーしなくても最初から送りボタンが
表示されるようにするには、どのように記述したらよいでしょうか？
初歩的な質問で申し訳ありません。
お返事お待ちしております。
木村様、お久しぶりです。
活用いただいてありがとうございます。
CSSの、
.b_left span, .b_right span { 内に、opacity:0;とありますが、これを削除するか、1にすると常時表示されます。その時、以下のopacity:1;が不要ですから、削除していいです。
.pic:hover > label div span {
opacity:1;
color:#EEE;
}
なお、送りボタンが写真枠外に設定すると、見映え上いいかもしれません。
tyosbb様
お返事いただきありがとうございます！
以前お問合せさせていただいていたsafari対応には、
最初から矢印ボタンが表示されていれば、問題ないことに
気が付きました。
試してみたいと思います。ありがとうございました！
貴重な情報ありがとうございました。
そんなことがあるんですね。
いつも参考にさせていただいてます。
全てのパソコンで画像が横いっぱいに広がるよう、画像のwidthを100％に指定してみたのですが
画像が画面より大きくなってしまいうまくいきません。
解決策はありますか？
ありましたら教えていただきたいです。よろしくおねがいします。
「オールインワン・フルワイド型スライダー」でいかがですか?
まさに求めていたものでした。
参考にさせていただきます、ありがとうございました。
どういたしまして。
ご活用ください。