スライダー(スライドショー&ボタン送り)

スライドが水平方向に移動するタイプのスライドショーで、マウスオーバーで出現する左右への送りボタンで一枚ずつのコマ送りも可能にしたもの、いわゆるスライダーの作成である。

サンプル


表示用HTML

<div id="stage">
  <div id="frame">
    <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>
</div>

HTMLの概略説明

・送りボタンに関連付けるラジオボタンを10個(5枚の写真に各左右2個ずつ)設置する(非表示)。
・#photos 内にすべてのスライド(ここでは5枚)を水平に並べ、更に、一番左に最後のスライド、一番右に最初のスライドを加える。
 (スライドをスムースに連続して送るため)
・各スライド(#photo1,#photo2,,,)に、写真、左右送りボタンを設置する。


表示用CSS(Ie向けのみ)

/* 表示画面 */
#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
}
/* 表示枠 */
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの animation を設定*/
#photos {
	position:absolute;
	top:0;
width:4200px;
	animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo0と#photo5、#photo6と#photo1は同じスライド*/
#photo0, #photo1, #photo2, #photo3, #photo4, #photo5, #photo6 {
	float:left;
	position:relative;
}
/* 全てのラジオボタンを非表示に */
#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 Pゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 140px;
	color:#EEE;
}
.b_left span {
	left: 10px;	
}
.b_right span {
	left: 560px
}
/*ボタン文字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;
}
#next2:checked ~ #photos {
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
}
#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
}
#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
}
#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	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%; }
}

CSSの概略説明

・ここでは、Ie(及び最近のFirefox)向けのCSS記述になっていて、Chrome 向けには、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がある。
・#photos に、#photo0-#photo1-#photo2-#photo3-#photo4-#photo5-#photo6 を水平に並べ、これを左右に移動させる事によってスライドの切り替えを行う。
・左右にスライドを送るスライドショー用の animation をそれぞれ設定する。(imgPassToLeft,imgPassToRight)
・初期には、imgPassToLeft0 でスライドショーが進行する。スライドショー用のcss記述については、他の投稿を参照のこと。
・表示されているスライドの hover で現れる左右の送りボタンのクリック(#next1:checked など)で、各ボタンにセットされている animation の再生が始まる。
・各ボタンにセットされている animation は、左、右用の二通りで、左用あるいは右用は全てに同じ記述である。ただ、各ボタンによって、animationが始まる時間を変えている。
・各ボタンがクリックされてから、次のボタンがクリックされるまでは、そのクリックされたボタンの切り替え後のスライドショーが継続再生される。


コメント

スライダー(スライドショー&ボタン送り) — 46件のコメント

  1. 度々失礼します。
    Safariから見ていたので作動しなかっただけで、
    Firefoxから見た時はきちんと表示されていました!

    「Chrome 向けには、ベンダープレフィックス(-webkit-)をつけた記述を加える必要がある。」とのことでしたが、ごめんなさい><よく理解できないので、具体的にcssのどこに何を付け加えればよろしいでしょうか?><

    お忙しいと思いますが、ご返信お待ちしております。

    • やはりそうでしたか。safari、chromeではこのままでは作動しません。他のサンプルの例を見てください。ここでは省略していますが、
      animation、animaton-delay、および、keyframesの前に、-webkit-を付けたcodeをもう一通り記述する必要があります。

      • ご返信ありがとうございます!あちこにちコメントしてしまい、申し訳ございません!><
        なるほどなるほど!!

        他のサンプルだと-moz-をつけたり、何もつけなかったりと色々ありますが、
        全てのanimationとanimaton-delayとkeyframesの前に-webkit-を加えればよいのでしょうか?

        • 最近のFirefoxでは、-moz-は不要なようです。
          -webkit-を付けない記述とは別に、全てのanimationとanimaton-delayとkeyframesの前に-webkit-を加えた記述が必要となります。
          大変なようですが、コピペでやればそれほど手間ではありません。

          それではがんばってください。

          • 無事スライドショーをつけることに成功しました(サイトにはまだ反映させていないですが)!!本当に本当に有難うございました!!

            1つ質問なのですが、スライドショーの画像をリンクしてクリックすると他のページにとぶ、ということはできませんでしょうか?

  2. サイトに使わせてい頂いてます本当にありがとうございます。

    つきましては一つ質問なのですが、ヘッダーにこのHTMLとCSSコードを入れますと文字化けして、
    <>にならずにf”に変わってしまいます。
    何か良い解決方法はありませんでしょうか?
    よろしくお願いします。

    たなか

    • 田中さん、こんにちは。

      文字化けは、ヘッダーであるからというわけではないと思います。
      正直よくわかりませんが、
      そのページのほかの部分が文字化けしていないのなら、animation関係のコードと、ページの文字コードが合っていないからでしょうかね。

      解決が難しければ、<>を画像に変えて、imgタグで表示すれば解決します。

  3. こんにちわー
    スマホやXPとかには対応してないですよね(´・ω・`)
    PC・スマホや少し前のブラウザにも対応してるのを紹介していただけると助かります

    • こんこんさん、こんにちは。
      この稿のサンプルは、スマホに対応していません。というか、スマホ専用のページ向けではありません。せめてレスポンシブにすればよいと思います。次稿の、レスポンシブと表題に記載されている稿のサンプルを参考にしてください。

      XPというわけではなく、ブラウザのバージョンによっては対応していないかもしれません。
      それは、このサイト全体に言えることで、例えば、animation に対応していないブラウザでは使えません。こんこんさんのサイトの閲覧者のブラウザを解析してみて判断されたらいかがでしょうか。

  4. こんにちは!
    スライドショー、このページを見て無事に作成出来たのですが、スライドショーの上にメニューバー&ドロップダウンメニューがあり、ドロップダウンメニューのほうがスライドショーの下に隠れてしまいます。Z-indexで解決出来るようですが、どこに加えたら良いでしょうか?
    よろしくお願いいたします。

    • Nishiさんこんにちは。
      今、該当するような材料を持っていませんので、おそらくできるだろうというということで、回答します。
      メニューバーの方に、z-indexを設定してください。
      ドロップダウンの項目は、liで記述されていると思うのですが、そのulにclassを指定し、
      そこに、z-index:1000;を記述するのがいいかもしれません。
      ご検討ください。

      • tyosbbさん、
        メニューバーliの項目に「z-index:1000;を記述」で見事に解決しました。
        ご返答ありがとうございました!!大変参考になりました。

  5. お世話になります。
    サイト制作の際に、勉強させていただいております。

    今回5枚の写真でスライドショーを作成されていますが、
    こちらを3枚に変更することは可能でしょうか?

    その際、html、cssはどのように修正すればよろしいでしょうか?

    何卒、よろしくお願い申し上げます。

    • sakuradaさんこんにちは。
      同じ質問(こちらは4枚です)を、スライダー/左右移動型(レスポンシブ)で回答しています。
      そちらを参考にしてください。なお、
      <a href="http://css.programming.jp/pages/slider_slide2_3slides.html" rel="ugc">http://css.programming.jp/pages/slider_slide2_3slides.html</a>
      に3枚のケースを載せました。必要なら、ページソースでhtml、cssを見てください。

      • お世話になります。sakuradaです。
        ご返答ありがとうございました。
        こちらを参考にさせていただきます。
        お礼の連絡が遅くなり、申し訳ありませんでした。

  6. 初心者なのですが...
    サンプルと同じようにやってみたのですが、マウスを画像の上にのせても<>マークが出ません。
    ただし、あるであろう場所をクリックすると画像はチェンジします。
    どこが間違っているかわからないのですが教えていただく事は可能でしょうか?
    申し訳ありません。

    /*送りボタン文字(<、>)の設定*/
    .b_left span, .b_right span {
    position: absolute;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 80px;
    font-weight: bold;
    opacity:0;
    top: 140px;
    color:#EEE;
    }
    .b_left span {
    left: 10px;
    }
    .b_right span {
    left: 645px
    }
    /*ボタン文字hover時の設定*/
    .pic:hover &gt; label div span {
    opacity:1;
    color:#EEE;
    }
    .pic label div span:hover {
    color:#f00;
    cursor:pointer;
    }

    • kurosawaさん、はじめまして。

      .pic:hover &gt; label div span
      とありますが、実際は、.pic:hover > label div span と記述していますか。

        • HTMLの記述で、

          と、あるところで、<は、全角で記述されていますか。

          あとは、<>マークの、opacityが1になっていない、と言うことも考えられますが、こちらではなかなかわかりかねます。
          サーバーに仮に上げたものを拝見するか、作成したファイルをメール(tyosbb@ybb.ne.jp)で送っていただくかすれば、検証できると思いますが。

          • kurosawaさん

            ファイル拝見しました。
            CSS に誤りがあります。
            /*ボタン文字hover時の設定*/
            .pic:hover > label div span {
            のところの、> が、>(全角)になっています。

            また、以下で、width:4200px; は、幅が700pxですから、4900pxになります。
            #photos {
            position:absolute;
            top:0;
            width:4200px;
            animation: imgPassToLeft0 30s infinite;
            }

  7. ご指摘いただいた点を修正したのですが、マウスを乗せても表示されませんでした;^_^A
    位置を確認する為に
    /*送りボタン文字(<、>)の設定*/

    opacity:0;を1にして見ましたら、希望する場所に表示されます。
    他に考えられる点があれば良いのですが。
    何度もすみません。

    • HTMLに記述の順序違いがあります。
      <label for="back1"><div id="left1" class="b_left"><span><</span></div></label>
      のところが、
      <DIV id="left1" class="b_left"><label for="back1"><span><</span></label></DIV>
      となっています。

      • tyosbb様
        何度もありがとうございました!
        無事に解決いたしました。
        原因ですが、
        ホームページビルダー20のHTMLソース編集画面にこちらのサイトからコピペしていたのですが、保存する際に“修正しました”となって自然と書き換わっていました。
        メモ帳で書き換えて保存しましたら出来ました!
        ご丁寧にありがとうございました!

  8. tyosbb様
    はじめまして。
    お暇なときでよいのでご教授ください。
    このスライドショーのしたにコメントを入れて
    ______
    |¥画像|
    ______
    コメント
    という風にしたいです。


    のタグの間のどこに設置すればよいのでしょうか。

    • はじめまして。

      スライドショーは、<div id="stage"> から、最後の </div> までです。
      したがって、コメントは、その</div> の後に(ここでは</body>の前に)、例えば <p>コメント</p> のように記述してください。
      スライドショーは、画面中央に配置していますから、それとの兼ね合いで、中央にするか、全体を左寄せにするかは、ページ作りによると思います。

  9. はじめまして。
    当方大変初心者です。
    業務の為にスライドショーのやり方を調べておりまして、こちらに辿り着きました。

    このスライドショーに、特定の画像にとべるボタンを設置できないでしょうか?
    最近よく見かける、右下や中央下に画像数分の丸ボタンが並んでいて、スライド中でも、一番左のボタンををクリックしたら1枚目の画像へ、二番目のボタンをクリックしたら2枚目の画像へいけるというタイプにしたいのですが…。

    よろしくお願いいたします。

    • hiroさんこんにちは。
      「オールインワン型」あるいは、「同上フルワイド型」でいかがでしょうか。

      • tyosbb様

        お世話になっております。
        お早い回答ありがとうございます。
        「同上フルワイド型」が理想に近かったです。
        早速これを使わせていただいて試してみます。
        ありがとうございました。

  10. お世話になります、tyosbb様。
    左右スライド型を、少しずつカスタマイズし
    20枚のフォト表示、の表示等できました。
    動きもスムーズです。

    さて、1枚目から、&gt;で左にスライドさせる場合は
    &gt;のマウス感知範囲が&gt;の周辺で狭いのですが
    &lt;のマウス感知が、画像の左半分ぐらいから始まり
    適当な箇所でクリックしても、スライドします。
    解消方法をご教示いただけたら幸いです。

    • 画像サイズが違うのでしょうか。
      .b_left span { と、.b_right span {
      の値を調整してみたらどうでしょうか。

  11. ホームページのトップページのある場所に複数の画像を自動切り替で表示したくて
    こちらのソースをhtml、cssにコピーのペーストで実行してみましたが、、画像が画面いっぱいに全部表示されて画面が全く変わらなくて悩んでいます。
    cssは他の部分でも使ってるので記述は大丈夫と思っています。
    何か気を付けることがあるでしょうか?

    • kurasan さん、はじめまして。
      現象からすると、cssが適用されていないようです。
      cssは、本体のcssファイルにペーストしたのでしょうか?
      ペーストした部分が反映されていないと思われますが、こちらでは分かりかねます。
      このスライダー専用のcssファイルを作成した場合には、linkをチェックしてください。

  12. 初めまして。
    こちらのスライドを使わせて頂いているのですが、
    自動スライドは右回転のみにしたい場合はどのように設定したらよろしいでしょうか?
    今ですと、左に戻ると自動スライドも逆周りになってしまいます。
    何か良い解決方法はありませんでしょうか?
    よろしくお願いします。

    • はらさん、はじめまして。
      そうですね。同じ方向に回転する例は、
      「オールインワン型スライダー」(http://css.programming.jp/?p=1051)にあります。
      ここでは、FadeIN型ですが、スライドイン型にも代えられます。

      これを参考に、作成してみてはいかがでしょうか。

      • ご返信ありがとうございます。
        こちらは具体的にどのコードを変更したらよろしいでしょうか?
        オールインワン型の/*初期スライドショー*/に変更したらよろしいでしょうか?

        • オールインワン型をベースに作成してください。
          下部の位置ボタンが必要がなければ、関連のHTMLとCSSを削除してください。
          送りボタンの位置は、CSSで調整してください。

          • お望みのケースだと思うサンプルを新規投稿しました。
            「http://css.programming.jp/?p=1388」
            ご確認ください。

  13. お世話になります。
    サイト制作の際に、勉強させていただいております。

    今回5枚の写真でスライドショーを作成されていますが、
    こちらを3枚に変更することは可能でしょうか?

    その際、html、cssはどのように修正すればよろしいでしょうか?

    何卒、よろしくお願い申し上げます。

    • Kokoさんこんにちは。
      このサンプルに対し、同じ質問のコメントをすでにいただいています。
      以下のページに3枚の例を載せています。
      Html、CSSはページのソースをご覧いただければわかると思います。
      (以前のは動きがおかしかったので修正しました)

       http://css.programming.jp/pages/slider_slide2_3slides.html

      • 返信ありがとうございます。
        6枚の場合の修正点も教えていただきたいです。
        よろしくお願いします。

        • 5枚の時、3枚の時のHTML、CSSを見て、6枚の時どう記述すればよいかを考えてください。
          HTMLでは、#photo が一つ増えて、#photo0 から#photo7 までとなり、next,backボタンもひとつづつ増えます。
          CSSでは、
          #photos の全体の長さ:width は、6+2=8枚分ですから、8×600=4800px となります。
          #photos のanimationの長さは、36s になります。
          animation設定では、@keyframes imgPassToRight6と@keyframes imgPassToLeft6が増え、
          %刻みが100÷6刻みになります。
          その他、記述の意味を捉えて完成させてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です