こんにちは！ライドアクロスの若林です！
突然ですがSTUDIOを活用していて下記の内容で悩んだことありませんか？
「STUDIOのカルーセルスライダーを活用して複数写真をフェードイン・フェードアウトで
切り替え表示する際になぜかピカっ！と白く光ってしまう」🤔
実はこれCSSで解消できます！ しかも無限ループ可能です💡
今回はこの実装方法について解説いたします。
この記事を書こうと思った理由について
なぜ、この記事を書こうと思ったかというと、カルーセルスライダーを活用する際に
あのピカっ！と光る挙動が出てしまうのはデザイン的にも正直勿体ないなぁ．．．と感じたからです。
元々カルーセルスライダーは左右の動きに対応させるための仕様なので
無理やりフェードイン・フェードアウトで表示させるとエラーのような印象になってしまいます😫
できればこの印象は避けたいですよね？
- 細部までデザインにこだわり、最高の状態でお客様にサイトを納品したい！
- 理想的なフェードイン・フェードアウトの挙動で複数写真を切り替え表示させたい！
- エラーのような挙動を解消したい！
上記の点を皆さん求めているのではないか？と感じ、少し大変でしたが
CSSでカスタマイズする方法を調査・検証した結果、うまく実装できたので今回この記事を書きました。
メリットについて
CSSでカスタマイズするメリットは下記の７点になります。
- カルーセルスライダー活用時のピカっ！と光る挙動を解消することができます。
- 複数写真をフェードイン・フェードアウトで切り替え表示することができます。
- エラーを解消しつつ、無限ループが可能になります。
- 表示する写真の枚数に合わせてアレンジが可能です。
- STUDIOの無料プラン、有料プランどちらでも実装することが可能です。
- カルーセルスライダー活用時よりもサイトを軽量化させることができます。
- GIFも使わない方法なので、サイトを軽量化させることができます。
デメリットについて
逆にCSSでカスタマイズするデメリットは下記の２点になります。
- アレンジを加える際に基礎的なHTMLとCSSの知識が必要になります。
- できればコードは書きたくない！という方には正直おすすめできない方法です。
今回のカスタマイズは基礎的なHTMLとCSSの知識が必須になります。
コーディングの学習はこれからという方にとっては難しく感じるかもしれません。
一方で基礎的なHTMLとCSSの知識をお持ちの方であれば、すぐに理解いただける内容なのでご安心ください💡
保証について
今回は事例として２パターンのカスタマイズ内容をご用意しました！
すでにSTUDIO環境で調査・検証済みの内容なので２パターンとも確実に実装していただけます💡
- ５枚の写真を５秒間隔で無限に切り替え表示するCSS（フェードイン・フェードアウト）
- ３枚の写真を５秒間隔で無限に切り替え表示するCSS（フェードイン・フェードアウト）
上記以外のパターンについては別途調査・検証が必要になるので、保証の対象外になります。
もしカスタマイズをご希望の際はお問い合わせフォームからお気軽にご相談ください。
また、実際の挙動を動画でご用意したので、イメージのご確認に繋がれば幸いです。
▼５枚の写真を５秒間隔で無限に切り替え表示するCSSのイメージについて
皆さんのご感想について
【STUDIO制作】CSSで複数写真を切り替え表示する方法
＼ 定価500円 ／
お支払い完了画面で閲覧用のパスワードをお送りいたします。
下記からログインしていただき続きをご覧ください。
今回の実装方法は調査・検証にかなり時間を要しているのでサービス化してます🙇♂️
もし下記の事例に当てはまる際は、ぜひお手に取っていただければ幸いです！
- カルーセルスライダー活用時のピカっ！と光る挙動を解消したい方
- 複数写真をフェードイン・フェードアウトでエラーなく無限ループで表示したい方
- 細部までデザインにこだわり、最高の状態でお客様にサイトを納品したい方
- 自社サイトでも活用したい方
