オールインワン型スライダー

投稿日: 作成者:
　ユニクロやミズノのサイトなどなど、トップページの上部に表示されているスライダーをよく目にする。おそらくjQueryなどのjavascriptで作成されていると思われるが、これを、本稿では純CSS（pure CSS）で作成する。これまでにも、このサイトでCSS製スライダーを作成してきたが、今回のは、写真の下に、スライド切換えボタンと、現スライドを標示するボタンを付け加えた、オールインワン型のスライダーである。本サンプルを土台に、CSSを駆使すれば、自分の意図したデザインのスライダーを作成して頂けると思う。 　なお、画面のサイズに適応して表示サイズが縮小するように設定した。

サンプル（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; を記述してクリックに反応するようにしている。

コメント

オールインワン型スライダー — 25件のコメント

  1. ゆきちさんから、各スライドにリンクを貼りたいというご質問を受けました。
    このサンプルでは、スライド下の切換えボタンのクリックを有効にするため、スライド格納DIVに pointer-events: none; を指定していて、a タグを付加してもクリックが無効になっているため、リンクが作動しません。

    これを解決するため、cssの記述を変更しました。
    上の、本サンプル用CSSに変更点を示しましたので、リンクを貼る場合には、参考にしてください。

    返信 ↓

  2. スライドする画像を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つに減らそうと頑張っているのですがすべて減らしても3枚目のアニメーションから存在しない4枚目に行ってしまいます。詳しい方よければ教えてください。

    返信 ↓

    • 　おれんじさん、こんばんは。
      　３つに減らそうとする場合、スライド関係のhtml、cssを3つに減らすことはもちろんですが、animationの中身も変えないといけません。
      @keyframes flowSlides { の中の記述は、5枚用に記載されています。すなわち、２０（100/5）％刻みでスライドが切り替わるように設定されています。おれんじさんは３枚でやろうとしているわけですから、３３％刻みで設定しないといけません。２０％の例にならって、記述してみてください。　
      　

      返信 ↓

  4. オールインワン型を実装したくて、こちらのサイトを見つけてとても助かりました！

    ところで1点質問なのですが、
    「マウスオーバーしている時は、スライダーが止まる」
    という動作は可能でしょうか。

    恐れ入りますが、教えていただけると助かります。
    よろしくお願いいたします。

    返信 ↓

    • weeknight様

      すみません。コメントを見過ごしていました。
      遅くなりましたが、cssに以下を追加してください。

      #photos:hover {
      cursor:pointer;
      animation-play-state:paused;
      }

      返信 ↓

  5. ピンバック: 広告代理店が知らないDFPというツール

  6. 初めまして。
    こちらのサイト、すごく助かりました。
    あとお伺いしたいのですが、FTTPサーバーなどにCSSを名前で保存した場合は、
    HTMLには追加は必要でしょうか？
    初心者になりますため、初歩的な質問かもしれませんが、ご回答頂けましたら幸いです。

    返信 ↓

    • totoさん、はじめまして。
      CSSを外部ファイルにしてサーバーに上げた場合は、
      HTMLのhead内に、<link href="ファイルのある場所/ファイル名.css" rel="stylesheet" type="text/css" />
      と、記述して参照しておけば、HTML内には追加する必要はありません。

      返信 ↓

  7. 参考になります。ありがとうございます。
    ８秒間隔だと長いので６秒にしたいのですが、どこを変えればよいのでしょうか？
    よろしくお願いいたします。

    返信 ↓

    • genjoさん、こんばんは。

      cssで、
      トータルの時間40sを全て30sに代えます。
      animation-delayが8秒間隔になっていますが、6秒間隔に代えてください。
      例えば、8sを、6sに、32sを24sに。

      これで、OKです。

      返信 ↓

  8. JSを使わないスライダーを探していました。
    すごく助かりました！

    質問なのですが、スマホのブラウザではコンテナは表示されるのですが、画像が表示されないブラウザーがありました。どのようにすれば表示できるようになりますでしょうか？

    ※スマホのクロームでは問題なく画像が表示されました。

    返信 ↓

    • okiさんこんにちは。

      早速ですが、androidのブラウザではおっしゃる通り画像が表示されませんね。
      左右移動型やフェイドイン型などでは正常に表示されますが。

      今直ちに検討に入れないのですが、CSSの一部が対応していないのではないかと思います。
      CSSで心当たりを当たっていただくか、フェイドイン型などをお使いいただけないでしょうか。

      こちらで解決いたしましたら、またお知らせします。

      返信 ↓

      • tyosbbさん

        早速の返信ありがとうございます。
        レスポンシブバージョンがあることに気づきませんでした！
        レスポンシブバージョンを使ってみます。

        ありがとうございました！！

        返信 ↓

        • okiさん。

          調べた範囲では、animationが作動していません。opacity:0のまま止まっているようです。なぜ、このファイルでanimationが作動しないのかは、今の段階では謎です。
          レスポンシブバージョンで代替可能なら、それでお願いします。

          返信 ↓

  9. スライド7枚・オールインワン型は探していて、こちらのサイトを見つけてとても助かりました！

    質問なのですが、オンラインショップのヘッダーに実装するとトップページから検索窓、商品ページからカートボタンが消えてしましました。

    /*全ラジオボタンを非表示に*/
    input {
    display: none;

    が原因なのですが、何かいい方法ないでしょうか。よろしくお願いしますm(_ _)m

    返信 ↓

    • 確かに、その現象は起こります。
      input { display: none; }　を削除し、
      #r1,#r2,#r3,,,,,, {
      display:none;
      }
      のように、ラジオボタンのidすべてについて、cssで display:none; としてください。

      返信 ↓

  10. 初心者質問すみません！
    htmlはindex.htmで良いと思いますが、cssはなんていうファイル名でどこに置いたらいいのでしょうか？
    html内に参照してるファイル名(*.css)がないので…
    ほんと、ド初心者ですみません！

    返信 ↓

    • まーさん。はじめまして。
      例えば、cssをanimation.cssと言うファイルに書き込んで、
      htmlと同じディレクトリーに置いたとしますと、
      htmlのhead内に、<link href="animation.css" rel="stylesheet" type="text/css" />
      と、記述します。
      cssの記述方法について、google検索して、勉強することをお勧めします。

      返信 ↓

  11. はじめまして、ここのサイトにたどり着け勉強させていただいています、ありがとうございます。
    コピペしてみたのですが写真の下の丸いボタンが、なぜか四角い形のものになってしまいます、直す方法教えていただけるとありがたいのですが、よろしくお願いします。

    返信 ↓

    • nabeさん、はじめまして。
      下の丸いボタンは、btn_1.gif（ここではimagesフォルダにある）が表示されていて、各スライドが移動すると、そのスライドと行動を共にするbtn_2.gifが、該当位置に表示されます。
      すなわち、背景色と同じ色の四角の中に、○を描いた画像を2種類用意して、表示させるようにしてください。

      返信 ↓

tyosbb にコメントする コメントをキャンセル

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

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