先にカバーフロー型スライドショーを別ページに投稿したが、本稿は、左右移動ボタンを追加したスライダーの作成である。基本的には、前項のスクリプトを踏襲しているが、スライダーの性格上横長（一般的に多い幅960px）のステージに中央に表示スライド、左右に１枚ずつの控えスライドを配したタイプのものにした。
サンプル（DEMO）
本稿表示用HTML、CSS
あらかじめ用意した画像
・imagesフォルダに、左右移動ボタン（forward_1.png,forward_2.png,back_1.png,back2.png）を格納。_2が付いたボタンはマウスオーバー時に表示。
・img11フォルダに、720*232px の写真6枚を格納。
HTMLのポイント説明
・各写真を入れた、divと同じdivに、左右移動用ボタンを入れる。
（それぞれのボタンクリックで、それぞれに用意したanimatioを再生させる）
CSSのポイント説明
・animation には、見えていなスライドのものも含めて記述している。
・animationの記述をそれぞれのボタン用に用意せず、共有できないかどうか。同じ記述を連続して使うことはできないようなので、少なくとも２つの記述を交互に使うことでできそうであるが、時々反応しないときがあるので、すべてのボタンにそれぞれの記述を用意した。
・スライド写真のサイズを変更するときは、translateZの値を変えて位置を調節する必要がある。