左右写真送り型スライダー

表示写真の右側にマウスをのせると右側の送りボタンが表示され、クリックで右側から写真が入ってくると同時に表示されている写真が左側に退場するタイプのフォトギャラリーというか、スライダーである。逆の左側も同様の操作が可能である。

サンプル



本サンプル表示用HTML

<div id="stage">
  <input type="radio" id="back2" name="gal" checked>
  <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">
  <div id="b_btn">
    <label for="back2"><div id="left2" class="cover_left"><span><</span></div></label>
    <label for="back3"><div id="left3" class="cover_left"><span><</span></div></label>
    <label for="back4"><div id="left4" class="cover_left"><span><</span></div></label>
    <label for="back5"><div id="left5" class="cover_left"><span><</span></div></label>
   </div>
  <div id="n_btn">
    <label for="next1"><div id="right1" class="cover_right"><span>></span></div></label>
    <label for="next2"><div id="right2" class="cover_right"><span>></span></div></label>
    <label for="next3"><div id="right3" class="cover_right"><span>></span></div></label>
    <label for="next4"><div id="right4" class="cover_right"><span>></span></div></label>
  </div>
  <div id="photos">
    <div id="photo1"><img src="wp-images/1.jpg"></div>
    <div id="photo2"><img src="wp-images/2.jpg"></div>
    <div id="photo3"><img src="wp-images/3.jpg"></div>
    <div id="photo4"><img src="wp-images/4.jpg"></div>
    <div id="photo5"><img src="wp-images/5.jpg"></div>
  </div>
</div>

HTMLの概要説明

・左右4つずつの送りボタン用ラジオボタンを配置する。
 (1枚目のスライドには左送りボタンが、最後のスライドには右送りボタンがない)
・左送りボタンは、label として、cover_left(幅200px、高さ100%で画面左に配置) の中に配置し、
cover_leftにマウスがのった時にイベントが発生するようにする。
・右送りボタンについても、左ボタンと同様に画面右に配置する。
・各スライドは、css で、div Photosの中に水平一列に順次並ばせ、photos 全体を transition で移動させる。

本サンプル表示用CSS

/*全体のコンテナー*/
#stage {
	position: relative;
	width: 600px;
	height: 340px;
	margin: 0 auto;
	overflow:hidden;
}
/*全てのラジオボタンを非表示に*/
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}
/*全ての写真を水平一列に格納したdiv、#photosにtransitionを設定*/
#photos {
	position:absolute;
	top:0;
        width:3000px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*各写真の並び位置を設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
	position:relative;
	float:left;
}
/*ボタン領域の設定*/
.cover_left, .cover_right {
	position:absolute;
	top:0;
	width:200px;
	height:348px;
	display:none;
	cursor:pointer;
	z-index:101;
}
.cover_left {
	left:0;
}
.cover_right {
	left:400px;
}
/*ボタン領域内のボタン文字(<、>)の設定*/
.cover_left span, .cover_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;
}
.cover_left span {
	left: 10px;	
}
.cover_right span {
	left: 160px
}
/*ボタン領域hover時文字の設定*/
.cover_right:hover > span,.cover_left:hover > span {
	opacity:1;
	color:#EEE;
}
#right1,#right2,#right3,#right4,#left2,#left3,#left4,#left5 {
	display:none;
}
/*各ボタン領域がクリックされた時の#photosの行き先位置の設定*/
#back2:checked ~ #photos { left:0; }
#back3:checked ~ #photos,#next1:checked ~ #photos { left:-600px; }
#back4:checked ~ #photos,#next2:checked ~ #photos { left:-1200px; }
#back5:checked ~ #photos,#next3:checked ~ #photos { left:-1800px; }
#next4:checked ~ #photos { left:-2400px; }
/*ボタン領域クリック時に前表示域を消し切り替え後の表示域を表示*/
#back2:checked ~ #n_btn label #right1 { display:block; }
#back3:checked ~ #b_btn label #left2,#back3:checked ~ #n_btn label #right2 { display:block; }
#back4:checked ~ #b_btn label #left3,#back4:checked ~ #n_btn label #right3 { display:block; }
#back5:checked ~ #b_btn label #left4,#back5:checked ~ #n_btn label #right4 { display:block; }
#next1:checked ~ #b_btn label #left2,#next1:checked ~ #n_btn label #right2 { display:block; }
#next2:checked ~ #b_btn label #left3,#next2:checked ~ #n_btn label #right3 { display:block; }
#next3:checked ~ #b_btn label #left4,#next3:checked ~ #n_btn label #right4 { display:block; }
#next4:checked ~ #b_btn label #left5 { display:block; }

CSSのポイント説明

・全てのスライド(写真 photo1,,,photo5)を #photos の中に水平に並べ、photo1が画面中央になるように配置する。
・#photos に transition を設定し、ラジオボタン(ボタン領域)がクリックされた時に所定の位置に移動するようにする。
 例えば、#back3あるいは#next1がチェックされたら、-600pxに移動し、2枚目のスライドを表示する。
 #back3:checked ~ #photos,#next1:checked ~ #photos { left:-600px; }
・各スライドごとに、スライドを送るためのボタン領域をlabelとして左右に配置し、ラジオボタンと関連付ける。
・右ボタン領域の中に、>を、左ボタン領域の中に、< を配置し、指標とする。
・初期においては、全てのラジオボタン、全てのボタン領域を非表示にしておく。
(ページが開くと、#back2がチェックされ(2枚目のスライド表示時の左ボタン領域がクリックされた状態)、一枚目のスライドが表示される。
・送りボタンがクリックされたら、表示されるスライド番号のボタン領域を左右に表示するようにし、次のクリックを待ち受ける。
例えば、3枚目のスライドで戻り送りボタンがクリックされた場合、2枚目のスライドが表示され、#left2,#right2 が表示される。
 #back3:checked ~ #b_btn label #left2,#back3:checked ~ #n_btn label #right2 { display:block; }


コメント

左右写真送り型スライダー — 8件のコメント

  1. はじめまして、こちらのサイトを参考にさせて頂いています。
    ほとんど知識がないので苦戦しています。
    解決方法を教えて頂けると大変助かります…

    画像の表示サイズにとらわれずに左右のスライドを行いたいと考えていますが、上手くできない状態です。
    こちらのサイトの「スライダー/左右移動型(レスポンシブ)」を参考に行ったものは上手くいったのですが、自動スライドはさせたくないと考えています。
    クリックした時のみスライドする方式で表示サイズは自由にすることはできないでしょうか。

    解決方法をご助言頂けると幸いです。

    • はじめまして。

       この例では、1枚目から5枚目までのスライドが、帯状に水平に並んでいるものを、クリックによって一枚分移動させています。したがって、サイズが同一でないとうまくいきません。
      解決方法としては、サイズの小さな画像は背景をつけて、背景が他の画像と同じサイスになるようにし、大きなサイズのものは、小さくサイズダウンして、いずれにしても同じサイズの画像に統一することです。

       レスポンシブではうまくいったということですが、この場合、divのphoto1からphoto5までを帯状に配置し、その中の画像のwidthを100%にしていますので、小さなサイズの画像は引き延ばされて、大きな画像は縮んで表示されているはずです。
       もし、それでも構わないのであれば、スライドショーを動かさないようにすればいいです。すなわち、cssの #photos { 内の
      animation: imgPassToLeft0 30s infinite; を削除すれば、自動スライドは起きません。

       以上ご検討ください。

      • 早速のご返信ありがとうございます。
        画像の表示サイズについては、元と画像サイズは全て一緒なのですが実際の表示するエリアが600×340でない為、元のサイズと同じサイズでは表示させないという意味でした。

        ご助言頂きました「cssの #photos { 内のanimation: imgPassToLeft0 30s infinite; を削除」を実施してみたのですが、今度は1枚の画像で固定されてしまい<>の送りボタンも表示されない状態となってしまいました。

        元の「スライダー/左右移動型(レスポンシブ)」記載のコードから変更している点は、画像を表示するエリアが小さい為それに合わせてcssの.b_left span, .b_right span {内にあるfont-size:を40pxから20pxに変更、htmlの画像を指定している部分のみとなります。
        たびたびのご質問となってしまいますがよろしくお願いします。

        • サイズが異なる場合も、設定を変えれば可能ですが、うまくいっている方を考えることにしましょう。レスポンシブの方が何かといいと思います。

          さて、#photos { 内の animation: imgPassToLeft0 30s infinite; を削除するとともに、(-webkit-付きも)
          #photos 内の top:0; の次に、left:-100%; を加えてください。
          #photos(画像の帯)の初期位置を、最初のスライド(photo1)が表示されるようにします。

  2. 何度も何度も申し訳ありません、早々ご返信にたけて大変助かっております。

    先程教えて頂きました方法により一枚目の自動スライドはオフにすることができました!ありがとうございます。
    ただ、1枚目以外の画像に送りボタンで移動してしまうと、そこからまた自動スライドが始まってしまいます。
    「#next1:checked ~ #photos {」等にある「animation: imgPassToLeft1 30s infinite;」も消してしまえば良いのかと思ったのですが、こちらを消してしまうと送りボタンを押しても反応しなくなってしまい・・・
    完全に自動スライドのみオフにしたい場合の方法をご助言頂けますでしょうか。
    理解が追い付いていなく申し訳ありません

    • こちらこそ何度も考え足らずで申し訳ありません。
      各animationをスライドのみにし、スライドしたら止めるようにします。
      次のように、すべての#next,#backの項目について、変更してください。
      delayの数値は各項目で違います。

      #next1:checked ~ #photos {
      animation: imgPassToLeft1 30s;
      animation-delay: -4.8s;
      animation-fill-mode: forwards;
      }

      さらに、animationの記述をいかに変更してください。

      @keyframes imgPassToLeft1 {
      0% { left:-100%; }
      16% { left:-100%; }
      20% { left:-200%; }
      100% { left:-200%; }
      }
      @keyframes imgPassToLeft2 {
      0% { left:-200%; }
      36% { left:-200%; }
      40% { left:-300%; }
      100% { left:-300%; }
      }
      @keyframes imgPassToLeft3 {
      0% { left:-300%; }
      56% { left:-300%; }
      60% { left:-400%; }
      100% { left:-400%; }
      }
      @keyframes imgPassToLeft4 {
      0% { left:-400%; }
      76% { left:-400%; }
      80% { left:-500%; }
      100% { left:-500%; }
      }
      @keyframes imgPassToLeft5 {
      0% { left:-500%; }
      96% { left:-500%; }
      99.999% { left:-600%; }
      100% { left:-100%; }
      }
      @keyframes imgPassToRight1 {
      0% { left:-100%; }
      96% { left:-100%; }
      99.999% { left:0%; }
      100% { left:-500%; }
      }
      @keyframes imgPassToRight2 {
      0% { left:-200%; }
      76% { left:-200%; }
      80% { left:-100%; }
      100% { left:-100%; }
      }
      @keyframes imgPassToRight3 {
      0% { left:-300%; }
      56% { left:-300%; }
      60% { left:-200%; }
      100% { left:-200%; }
      }
      @keyframes imgPassToRight4 {
      0% { left:-400%; }
      36% { left:-400%; }
      40% { left:-300%; }
      100% { left:-300%; }
      }
      @keyframes imgPassToRight5 {
      0% { left:-500%; }
      16% { left:-500%; }
      20% { left:-400%; }
      100% { left:-400%; }
      }

      • 何度もご親切にありがとうございました!思い通りの動きをするようになりました。
        貴重なお時間を頂きありがとうございます、大変助かりました。

        • どういたしまして。
          こちらこそ的確にお答えできずに、時間をかけてしましました。
          引き続き、ご活用ください。

コメントを残す

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