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

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

サンプル


表示用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が始まる時間を変えている。
・各ボタンがクリックされてから、次のボタンがクリックされるまでは、そのクリックされたボタンの切り替え後のスライドショーが継続再生される。


コメント

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

  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="nofollow">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> のように記述してください。
      スライドショーは、画面中央に配置していますから、それとの兼ね合いで、中央にするか、全体を左寄せにするかは、ページ作りによると思います。

M.Y にコメントする コメントをキャンセル

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>