Diviのギャラリーモジュールで縦幅に合わせた画像スライダーを作る方法

Diviの画像スライダーの高さを固定する

こんにちは、ナオミです!

昨日こんな質問がDiviサロンのサポートルーム出ました。

【質問】ギャラリーモジュールのスライダー表示について
ギャラリーに使う画像で、横画像と縦画像を混合させて
レイアウトをスライダーに設定した場合…
縦画像の表示の際に、画面いっぱい表示されて変な感じです。
できたら、横画像の表示の範囲内で、縦画像も表示されたら嬉しいのですが…

どういうことかと言いますと、Diviのギャラリーモジュールのスライダーモードは画像の横幅を固定してますので、縦長の画像が表示されるとページが縦に伸びるんです。

Diviギャラリーモジュールの問題

こんな感じで、横幅が固定されてるため、縦長の画像は大きく表示されてしまいます。

解決方法は画像が横幅ではなく縦幅にあって表示されればいいわけです。

Diviギャラリーモジュールのスライダーが縦幅に合う

どうやったらこのように設定できるのか紹介していきます。

手順

  1. 画像スライダーを作る
  2. CSSの追加
  3. モジュールの設定

1. Diviのギャラリーモジュールで画像スライダーを作る

まずはDiviのモジュールから『ギャラリー』を選び、高さの違う画像を追加していきます

Diviのギャラリーモジュールでスライダー設定1

次にデザインタブのレイアウトに行き、スライダーを選択します。

Diviのギャラリーモジュールでスライダー設定2

この状態ですでにスライダーは完成なのですが、試してみてください。

画像が変わる度に高さが変わってしまいますよね。

これが従来の画像スライダーです。

ではどうやって高さを固定するのか説明します。

2. DiviにCSSを追加

まずはCSSを追加します。

以下のCSSのコードをあなたのサイトに追加してください。

.same-height-gallery .et_pb_gallery_items,
.same-height-gallery .et_pb_gallery_item,
.same-height-gallery .et_pb_gallery_image {
  height: inherit;
}

.et_pb_gallery_fullwidth.same-height-gallery .et_pb_gallery_image img {
  width: initial;
  height: initial;
  max-width: 100%;
  max-height: 90%; 
}

.same-height-gallery .et_pb_gallery_item {
  text-align: center;
}

.same-height-gallery .et-pb-controllers {
  margin-bottom: 22px;
}

このCSSに関する細かい説明はDiviサロンでお願いします。

これで準備完了です。

3. 縦幅に合わせるためのギャラリーモジュールの設定

追加したCSSを使うためにはモジュールの設定が必要です。

Diviのギャラリーモジュールでスライダーの高さを固定する設定1

『ギャラリーの設定 → 詳細 → CSSIDとクラス → CSSクラス』へ行きます。

そこに上の画像のようにsame-height-galleryと入力してください。

モジュールの高さの設定

次に『デザイン → サイズ変換 → 高さ』にいきます。

Diviの画像スライダーの高さの設定

ここで設定する高さが、画像スライダーの高さになります。

タブレットやスマホでのモジュールの幅が変化しますので、それらでも個々に高さを指定することを推奨します。

これで準備完了です。

ビルダーを終了してスライダーをみてみましょう。


Diviギャラリーモジュールのスライダーが縦幅に合う

このようにスライダーの高さが固定されれば、成功です。

それではまた。

コメントする

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