テーマオプション Elastic Slider

Avadaは4種類のスライダーをデフォルトで使用することができますが、Elastic Sliderはその中で最も手軽なスライダーです。このコンテンツでは、【Elastic Slider】の全10のオプションについて解説しています。

オプションを使用したい場合は、テーマオプションの次の項目を必ず有効にしておきましょう。『Advanced（詳細設定）』 → 『Theme Features（テーマ機能）』 → 『Elastic Slider』

Elastic Sliderの作り方については【Elastic Sliderの作り方】で解説しています。

このオプションは、スライダーの高さと幅を変更することができます。
単位は、％やpxなどが使えます。

画像では、薄い青部分がこのオプションで設定した820px*820px部分です。

このオプションは、スライドが切り替わる時のアニメーションタイプを選択することができます。
サイドはスライドアニメーション、センターはフェードアニメーションになります。

このオプションを有効にすると、ページ読み込み時にスライダーを自動再生することができます。

このオプションは、各スライドを表示しておく時間（ミリ秒）を決めることができます。

1秒=1000ミリ秒となりますので、１枚のスライドを３秒表示させたい場合は3000を設定します。

このオプションは、スライドが切り替わってからタイトルやキャプションが表示されるまでの時間（ミリ秒）を設定することができます。

このオプションの注意点としては、【4.Slideshow Interval / スライドショーの間隔】で設定する時間がこの設定より短いと、タイトルやキャプションが表示される前にスライドが切り替わってしまいます。
タイトルやキャプションを表示させたい場合は、 設定する長さが4 > 5 になるようにしましょう。

正しい設定例 4 > 5

４．Slideshow Interval　3000
５．Sliding Speed　1500

誤った設定例 4 < 5

４．Slideshow Interval　1500
５．Sliding Speed 3000

このオプションは、スライド内に表示されるサムネイルの幅をpx単位で設定することができます。

画像では250pxで設定しています。

このオプションは、タイトルを表示させる場合のフォントサイズを設定することができます。
pxの他にemやremなどの単位を使用することができます。

画像では、36pxで設定しています。
なお、タイトルはh2となります。

このオプションは、キャプションを設定した場合のフォントサイズを設定することができます。
pxの他にemやremなどの単位を使用することができます。

画像では、20pxで設定しています。
なお、キャプションはh3となります。

このオプションは、タイトルを設定した場合のフォントカラーを設定することができます。

画像では、#f44336で設定しています。

このオプションは、キャプションを設定した場合のフォントカラーを設定することができます。

画像では、#03a9f4で設定しています。