オールインワン・フルワイド型スライダー

 スライドショー、スライドの位置(順番)表示と移動を兼ねたボタン、左右送りボタンの機能を併せ持ったスライドショーで、スライド(画像)が、画面幅いっぱいに表示されるタイプのスライダーである。スライドは、画面サイズに応じてスライド幅が画面サイズの幅に調整される。いわゆるレスポンシブタイプになっている。

サンプル(DEMO)

 別ページに示した。
 てすとさんからのコメントでヒントを得て、サイズの異なる画像にも対応する様修正しました。
 変更したスクリプトの部分は赤字で示しています。

準備

・画像(ここでは、1920*400px の5枚の写真)をhtmlと同じディレクトリーのフォルダー(ここではimg12)に準備する。
・送りボタン用画像、左右用2つ、それぞれのロールオーバー時の画像を、htmlと同じディレクトリーのフォルダー(ここではimages)に準備する。
 ここでは、forward_1.gif、forward_2.gif、back_1.gif、back_2.gif
・表示スライドの順番を表示するためのドット画像、trbtn_1.gifと、trbtn_2.gif を images フォルダに準備する。

HTMLのポイント説明

・スライドをdivの#photos内に水平に5枚並べて、1枚目のスライドの前に5枚目のスライド、5枚目のスライドの後に1枚目のスライドを付け加える。計7枚の帯になる。
・各スライドを入れるdiv(#photo1,#photo2,,,)内には、それぞれに、送りボタンを配置する。
・現在、どの順番のスライドが表示されているかを示すため、灰色のドット画像(trbtn_1)を div #btn_band 内に5つ水平に並べて配置し、青色のドット画像がその上を移動し、順番を示すようにする。

CSSのポイント説明

・スライドが水平に並んでいる#photosを、左右にanimationで移動させることにより、スライドショーを形成する。
・スライドショーが再生されている途中で、左右の送りボタン、あるいは、スライドに関連付けられているドットボタンをクリックすることにより、その指示に従って、目的のスライドに移動し表示させる。
・位置表示ボタン移動animationがちょっと複雑になっているのは、ドットが移動しているときはopacityを0もして見えないようにしているため。


コメント

オールインワン・フルワイド型スライダー — 5件のコメント

  1. 640*540の画像を使ってやっているのですが、なぜか400px?の高さになってしまい画像全てが表示できません。640*540のサイズ全て表示させるにはどこのパラメーターを調整すればよいのでしょうか。
    また掲載しているcssをコピペしたはずなのですが、表示ボタン用ラジオボタンの4つ目(または5つ目)クリックするとなぜか1枚目の画像に移動してスライドショーが機能しなくなります。原因はどこの部分なのですか?
    ソースはほぼ同じです。

    • てすとさん、こんにちは。

      640フルワイドのデバイス用と言うことですね。
      以下の2点を変更してください。
      1)#stage { の中の、overflow:hidden; を削除してください。
      2)#btn_band を以下に書きかえてください。
      #btn_band {
      position:absolute;
      width:100px;
      left:45%;
      padding-top:50%;
      }
      ここで、left、padding-top の数値は、適切な値に代えてください。
      これでうまくいくはずです。

      なお、ボタンの4,5でうまく反応しない原因は、定かではありませんが、
      htmlの、for="r4"、for="r5" の関連付けがうまくいっていないような気がします。

      以上ご検討ください。

      • 素早い返信ありがとうございます。
        ご提示いただいた通りしてみました、無事画像全てが表示されたのですが。
        Divタグの箱の中に更にdivタグの箱にスライドショーを組み込んでいるので見せたい部分以外の画像がはみ出てしまっているのですが、これはどうすれば良いのでしょうか。マスクなどで切った方が良いのでしょうか。

        位置表示ボタンに関してですが、コピペしてきてそのままなので何もいじってはいないので原因がわかりません。
        関連付けもそのままなので大丈夫だとは思うのですが、スライドショーの画像サイズにより不具合が出る場合があるのでしょうか?
        よろしくお願い致します。

        • この項のスライダーは、画面いっぱいに表示するタイプのものです。
          画面の部分に埋め込む場合は、オールインワン型スライダーの方を応用してください。

          • ありがとうございます。
            そちらを参考にさせていただきます。
            また何かあればご質問させて頂きますのでよろしくお願い致します。

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

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

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