カバーフロー型スライダー

 先にカバーフロー型スライドショーを別ページに投稿したが、本稿は、左右移動ボタンを追加したスライダーの作成である。基本的には、前項のスクリプトを踏襲しているが、スライダーの性格上横長(一般的に多い幅960px)のステージに中央に表示スライド、左右に1枚ずつの控えスライドを配したタイプのものにした。

サンプル(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の記述をそれぞれのボタン用に用意せず、共有できないかどうか。同じ記述を連続して使うことはできないようなので、少なくとも2つの記述を交互に使うことでできそうであるが、時々反応しないときがあるので、すべてのボタンにそれぞれの記述を用意した。
・スライド写真のサイズを変更するときは、translateZの値を変えて位置を調節する必要がある。


コメント

カバーフロー型スライダー — 11件のコメント

  1. お世話になっております。
    度々のコメント失礼いたします…

    スライドショー&送りボタン「オールインワン型」の実装についての質問なのですが
    コメントを入力する欄が正しく表示されず、コメントできなかったので、こちらに書かせていただきます。

    本題ですが、「オールインワン型」で、600px×100pxの画像をスライドショーにしたいと思っています。
    背景のグレーの部分の高さを画像に合わせるには、CSSのどこを変更すればいいですか?

    何度もスイマセン、宜しくお願いします…

    • 確かにコメント欄がおかしいですね。至急チェックしておきます。

      ご質問の件ですが、htmlの最後に、
      <!– stageの高さの確保 –>
      <div style="padding:28%;"></div>
      とありますが、28%は縦横比から計算するものです。
      手っ取り早くは、適当にこの値を変えて、調整してください。

      • ありがとうございます。
        そこを編集しても、変化がなかったので、新しくページを建ててスライドショー単体で試してみたところ、一応上手くいきました。
        他のCSSが邪魔をして本来設置したいページにはうまく設置できないみたいです。

        他の方法で高さを変更することはできませんか…?

        • レスポンシブにするには、この方法がいいです。
          div style="padding:28% !important;"
          としてみたらいかがですか?

          レスポンシブにこだわらないのであれば、#stageのheightを指定してください。

          • 前者の変更ではうまくいきませんでしたが、後者のheight指定の方法で成功しました!
            わざわざありがとうございました。
            これからも宜しくお願いします。

  2. はじめまして。こちらのカバーフロー型スライダーを気に入って利用させていただきます。
    同じようにやってみたのですが、左右移動ボタンが表示されないのですが、何か考えられる問題はありますでしょうか?
    ボタン自体が見えないだけで、マウスオーバーすると反応します。

    • はじめまして。
      >ボタン自体が見えないだけで、マウスオーバーすると反応します。
      という状態が、どういうものかよくわかりませんが、手のひらポインターが出るということでしょうか。それなら以下のことが考えられます。

      imagesフォルダーに、forward_1.png,forward_2.png,back_1.png,back2.pngが格納されているのが前提ですが、
      CSSの、左右ボタン表示(background:url(images/back_1.png); など)でファイル名が違っている。.png で指定していますが、.gif や .jpg の場合は、拡張子を間違えないようにしてください。

      以上、ご検討ください。

  3. 返信ありがとうございます。
    そうなんです、手のひらポインタは出てるのですが、画像は表示されないのです。
    ファイル名も再度確認しましたが、間違っていないようでした。
    imagesフォルダに他のファイルが入っていたりしたら、駄目ということでもないですよね、、、。

    • imagesフォルダに他のファイルが入っていても関係ありません。
      画像ファイル名に誤りがなければ、CSS記述に間違いがありませんか。

      background:url(images/back_1.png); のところ4カ所を、
      もう一度確認してください。

      • ありがとうございます。凡ミスしていました。フォルダの階層が間違っていました。
        cssファイルをcssフォルダに入れていたので、../images/back_1.png
        でした。焦ってしまいましたがすぐにご返事いただけて助かりました。
        本当にありがとうございました。

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

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

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