保護中: 【STUDIO制作】CSSで複数写真を切り替え表示する方法【無限ループ対応】

こんにちは!ライドアクロスの若林です!
突然ですがSTUDIOを活用していて下記の内容で悩んだことありませんか?

「STUDIOのカルーセルスライダーを活用して複数写真をフェードイン・フェードアウトで
切り替え表示する際になぜかピカっ!と白く光ってしまう」🤔

実はこれCSSで解消できます! しかも無限ループ可能です💡
今回はこの実装方法について解説いたします。

目次

この記事を書こうと思った理由について

なぜ、この記事を書こうと思ったかというと、カルーセルスライダーを活用する際に
あのピカっ!と光る挙動が出てしまうのはデザイン的にも正直勿体ないなぁ...
と感じたからです。

元々カルーセルスライダーは左右の動きに対応させるための仕様なので
無理やりフェードイン・フェードアウトで表示させるとエラーのような印象になってしまいます😫

できればこの印象は避けたいですよね?

  • 細部までデザインにこだわり、最高の状態でお客様にサイトを納品したい!
  • 理想的なフェードイン・フェードアウトの挙動で複数写真を切り替え表示させたい!
  • エラーのような挙動を解消したい!

上記の点を皆さん求めているのではないか?と感じ、少し大変でしたが
CSSでカスタマイズする方法を調査・検証した結果、うまく実装できたので今回この記事を書きました。

メリットについて

CSSでカスタマイズするメリットは下記の7点になります。

  • カルーセルスライダー活用時のピカっ!と光る挙動を解消することができます。
  • 複数写真をフェードイン・フェードアウトで切り替え表示することができます。
  • エラーを解消しつつ、無限ループが可能になります。
  • 表示する写真の枚数に合わせてアレンジが可能です。
  • STUDIOの無料プラン、有料プランどちらでも実装することが可能です。
  • カルーセルスライダー活用時よりもサイトを軽量化させることができます。
  • GIFも使わない方法なので、サイトを軽量化させることができます。

デメリットについて

逆にCSSでカスタマイズするデメリットは下記の2点になります。

  • アレンジを加える際に基礎的なHTMLとCSSの知識が必要になります。
  • できればコードは書きたくない!という方には正直おすすめできない方法です。

今回のカスタマイズは基礎的なHTMLとCSSの知識が必須になります。
コーディングの学習はこれからという方にとっては難しく感じるかもしれません。

一方で基礎的なHTMLとCSSの知識をお持ちの方であれば、すぐに理解いただける内容なのでご安心ください💡

保証について

今回は事例として2パターンのカスタマイズ内容をご用意しました!
すでにSTUDIO環境で調査・検証済みの内容なので2パターンとも確実に実装していただけます💡

カスタマイズ内容について
  • 5枚の写真を5秒間隔で無限に切り替え表示するCSS(フェードイン・フェードアウト)
  • 3枚の写真を5秒間隔で無限に切り替え表示するCSS(フェードイン・フェードアウト)

上記以外のパターンについては別途調査・検証が必要になるので、保証の対象外になります。
もしカスタマイズをご希望の際はお問い合わせフォームからお気軽にご相談ください。

また、実際の挙動を動画でご用意したので、イメージのご確認に繋がれば幸いです。

▼5枚の写真を5秒間隔で無限に切り替え表示するCSSのイメージについて

皆さんのご感想について

続きを読む
【STUDIO制作】CSSで複数写真を切り替え表示する方法【無限ループ対応】

【STUDIO制作】CSSで複数写真を切り替え表示する方法

\ 定価 980 円 /

お支払い完了画面で閲覧用のパスワードをお送りいたします。
下記からログインしていただき続きをご覧ください。

今回の実装方法は調査・検証にかなり時間を要しているのでサービス化してます🙇‍♂️
もし下記の事例に当てはまる際は、ぜひお手に取っていただければ幸いです!

この記事をおすすめできる方について
  • カルーセルスライダー活用時のピカっ!と光る挙動を解消したい方
  • 複数写真をフェードイン・フェードアウトでエラーなく無限ループで表示したい方
  • 細部までデザインにこだわり、最高の状態でお客様にサイトを納品したい方
  • 自社サイトでも活用したい方

この続きはパスワードで保護されています。全文を閲覧するためにはパスワードの入力が必要です。

お問い合わせフォーム

わっかーブログのお問い合わせフォームです。

  1. 1
    入力
  2. 2
    確認
  3. 3
    完了

STUDIO実装に関するご相談がございましたら
下記、お問い合わせフォームからお気軽にご連絡ください。
数時間~1日以内に折り返しご連絡致します。

お名前
必須
貴社名
必須
(例)個人事業主の方は「個人」または「屋号」を入力してください。
メールアドレス
必須
ご用件
お問い合わせ詳細
予期しない問題が発生しました。後でもう一度やり直すか、他の方法で管理者に連絡してください。

この記事が気に入ったら
フォローしてね!

もし良ければシェアして頂けると嬉しいです!

この記事を書いた人

『日々忙しくて実装まで手が回らない!』を解決します!STUDIOを活用したデザインカンプからの実装が得意。ライドアクロス代表。STUDIO愛用4年目。新潟県在住。武者修行を経て独立。趣味:旅と登山と銭湯巡り。STUDIO情報を中心にシェアしていきます!

目次