スライドショー、スライドの位置（順番）表示と移動を兼ねたボタン、左右送りボタンの機能を併せ持ったスライドショーで、スライド（画像）が、画面幅いっぱいに表示されるタイプのスライダーである。スライドは、画面サイズに応じてスライド幅が画面サイズの幅に調整される。いわゆるレスポンシブタイプになっている。
サンプル（DEMO）
準備
・画像（ここでは、1920*400px の5枚の写真）をhtmlと同じディレクトリーのフォルダー（ここではimg12）に準備する。
・送りボタン用画像、左右用２つ、それぞれのロールオーバー時の画像を、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 内に５つ水平に並べて配置し、青色のドット画像がその上を移動し、順番を示すようにする。
CSSのポイント説明
・スライドが水平に並んでいる#photosを、左右にanimationで移動させることにより、スライドショーを形成する。
・スライドショーが再生されている途中で、左右の送りボタン、あるいは、スライドに関連付けられているドットボタンをクリックすることにより、その指示に従って、目的のスライドに移動し表示させる。
・位置表示ボタン移動animationがちょっと複雑になっているのは、ドットが移動しているときはopacityを0もして見えないようにしているため。