tyosbbユニクロやミズノのサイトなどなど、トップページの上部に表示されているスライダーをよく目にする。これまでにも、このサイトでCSS製スライダーを作成してきたが、今回のは、写真の下に、スライド切換えボタンと、現スライドを標示するボタンを付け加えた、オールインワン型のスライダーである。本サンプルを土台に、CSSを駆使すれば、自分の意図したデザインのスライダーを作成して頂けると思う。画面のサイズに適応して表示サイズが縮小するように設定した。・スライドは、両側の送りボタン表示枠とそれに挟まれた写真枠と、写真下部の現スライド標示ボタン表示枠とからなる。・個々のスライドは、水平に帯状に並べる(CSSで)。・スライド切換えボタンは、個々のスライド枠外のステージに配置され、現スライド標示ボタンと同じ位置に各ボタンが来るように配置する。本サンプル表示用CSS※各スライドにリンクを貼ることが可能になるよう、修正しました。挟んだ記述がありますが、これは、初期の記述で、不要となったものです。修正した記述が必要なものは、その前後に示してありますので、そちらを採用してください。・スライドは、水平に並べ帯状になるようにする。・スライドショーは、スライドを8秒間隔のFadeIN_OUTで切り替えるタイプで、切り替え時に素早く表示位置に水平移動させている。・送りボタン、切換えボタンは、クリック時に目的のスライドからスライドショーが再開始されるように、スライドショーで使うanimationを共有している。・現スライド標示ボタンは、個々のスライドに配置されたボタンが、スライドと一緒に移動し、相当する切換えボタンの位置に配置される。・写真やボタン類の配置位置は%指定になっているので、使用する写真サイズ、デザインによって調整を必要とする。none;を記述して反応するようにしている。記述してクリックに反応するようにしている。:ゆきちさんから、各スライドにリンクを貼りたいというご質問を受けました。タグを付加してもクリックが無効になっているため、リンクが作動しません。これを解決するため、cssの記述を変更しました。上の、本サンプル用CSSに変更点を示しましたので、リンクを貼る場合には、参考にしてください。:・htmlのr、back、next、lbなどについて、すべて、6、7を追加記述します。・#photo6,#photo7についても、#photo5にならって追加記述します。・cssについても、#photo6,#photo7をはじめ、r、back、next、lbの6,7の記述を追加します。・animationについては、totalで、7*8=56sにします。・5枚の時は、100%/5=20%区切りでスライドを切り替えますが、7枚の時は、100%/7=14.3%区切りとなります。・14.3%の前後で、opacityを0,1で切り替えて、fade効果を出します。(5枚の時を参考にして、設定してください。_)mお願い致します。:記述が長くなりますので、他の記述を含めて、以下のページに示しました。「」を外してaddress欄に貼り付けてください。:今、3つに減らそうと頑張っているのですがすべて減らしても3枚目のアニメーションから存在しない4枚目に行ってしまいます。詳しい方よければ教えてください。:おれんじさん、こんばんは。3つに減らそうとする場合、スライド関係のhtml、cssを3つに減らすことはもちろんですが、animationの中身も変えないといけません。中の記述は、5枚用に記載されています。20(100/5)%刻みでスライドが切り替わるように設定されています。おれんじさんは3枚でやろうとしているわけですから、33%刻みで設定しないといけません。20%の例にならって、記述してみてください。「マウスオーバーしている時は、スライダーが止まる」という動作は可能でしょうか。恐れ入りますが、教えていただけると助かります。:weeknight様すみません。コメントを見過ごしていました。遅くなりましたが、cssに以下を追加してください。:お世話になります、tyosbb様。上記のテキストをcssに加えてみましたがポーズ状態になりません。:カーソルが手のひらになりますか。なっていなければ、CSSに不具合があります。記入されていれば、削除してください。記入個所は、どこでもいいですが、#photosの下にでも記入してください。こちらのサイト、すごく助かりました。あとお伺いしたいのですが、FTTPサーバーなどにCSSを名前で保存した場合は、HTMLには追加は必要でしょうか?初心者になりますため、初歩的な質問かもしれませんが、ご回答頂けましたら幸いです。:totoさん、はじめまして。/>と、記述して参照しておけば、HTML内には追加する必要はありません。ありがとうございます。8秒間隔だと長いので6秒にしたいのですが、どこを変えればよいのでしょうか?よろしくお願いいたします。:genjoさん、こんばんは。cssで、トータルの時間40sを全て30sに代えます。animation-delayが8秒間隔になっていますが、6秒間隔に代えてください。8sを、6sに、32sを24sに。:ありがとうございました。:JSを使わないスライダーを探していました。すごく助かりました!質問なのですが、スマホのブラウザではコンテナは表示されるのですが、画像が表示されないブラウザーがありました。どのようにすれば表示できるようになりますでしょうか?※スマホのクロームでは問題なく画像が表示されました。:okiさんこんにちは。androidのブラウザではおっしゃる通り画像が表示されませんね。左右移動型やフェイドイン型などでは正常に表示されますが。今直ちに検討に入れないのですが、CSSの一部が対応していないのではないかと思います。CSSで心当たりを当たっていただくか、フェイドイン型などをお使いいただけないでしょうか。こちらで解決いたしましたら、またお知らせします。:tyosbbさん早速の返信ありがとうございます。レスポンシブバージョンがあることに気づきませんでした!レスポンシブバージョンを使ってみます。調べた範囲では、animationが作動していません。opacity:0のまま止まっているようです。このファイルでanimationが作動しないのかは、今の段階では謎です。レスポンシブバージョンで代替可能なら、それでお願いします。:スライド7枚・オールインワン型は探していて、こちらのサイトを見つけてとても助かりました!質問なのですが、オンラインショップのヘッダーに実装するとトップページから検索窓、商品ページからカートボタンが消えてしましました。none;が原因なのですが、何かいい方法ないでしょうか。:確かに、その現象は起こります。