takanashi タナビーの高梨です。
今回はGetwidのImage Sliderブロックに関する設定を解説していきます。
全般設定についてはこちらをご覧ください。
Image Slider概要
Image Sliderブロックとは、公式ページの引用では
ナビゲーションスタイル、画像サイズ、アニメーション効果を完全に制御できる画像スライダーを作成する優れた方法
公式ページ（翻訳 by DeepL先生）
こちらのMedia ＆ Text Sliderと似てますね。
何がどう違うのでしょうか？
見ていきましょう！
ブロックの設定
まず、そもそも論として、画像を設定しないとブロック設定に項目が現れてきません。
まずは画像をギャラリーから、またはアップロードで設定しましょう。
ブロック設定はタブが２つあります。
- General
- Advanced
それぞれ解説していきます。
Generalタブ
Image Size：画像のサイズを設定します。
Image Fit：「Default」「Fill」「Fit」から選択します。「Fill」の場合はイメージのCSSにobject-fit:containが、「FIt」の場合はobject-fit:coverがつきます。「Default」の場合はobject-fitが設定されないようです。ややこしいことにobject-fitの初期値はfillです。
Show Caption：Onにすると、画像にキャプションを重ねて表示します。また、Onにすると、下記の「Caption Style」と「Caption Position」が表示されて設定できるようになります。
Caption Style：「Light」、「Dark」から選択。それぞれキャプションの背景透過が薄い白と少し濃いめの黒になります。
Caption Position：キャプションの表示位置を「Top Left」、「Top Center」、「Top Right」、「Bottom Left」、「Bottom Center」、「Bottom Right」、「Undrneath」から選択します。「Undrneath」は画面下の外に表示されます。
なお、キャプションを入力するのはメディアギャラリーになります。
メディアギャラリーは、ブロックメニュー（？）の鉛筆マークをクリックすると表示されます。
Link To：「None」（リンクなし）「Attachment Page」（本文が画像ファイルだけの投稿ページ）、「Media File」（画像ファイルだけの表示）、「Custom link per slide（スライドごとにリンク先を個別）」から選択。Custom link per slideの詳細設定はブロック側で行います。画像ごとに、画像の上部に「リンク先URL」、「New Tab」、「Link Rel」を設定します。「New Tab」はOnにすると新しいウィンドウでリンク先を開きます。「Link Rel」は<a>タグのrel属性にセットする値を設定します。
DesktopタブのSlider Height：スライダーの高さを「px」または「vh」で設定します。この値を設定すると、隣のTabletタブと「Mobileタブ」を選択できるようになります。
Tabletタブ：タブレットの時に上記Desktopタブで設定したHeightをリセットするかどうかを選択できます。
Mobileタブ：モバイルの時に上記Desktopタブで設定したHeightをリセットするかどうかを選択できます。
Enable Slideshow：ONにすると、自動で画面が次々と表示されるようになります。
Slideshow Speed：上記Enable SlideshowをONにすると設定できるようになります。次の画面が表示されるまでの間隔をミリ秒で設定します。
Animation Effect：「Slide」か「Fade」から選択します。「Slide」横にシュレっとスワイプ、「Fade」はモワッっと画像が入れ替わります。
Infinite：ONになると、スライダーが無限にループ、OFFだと端までたどり着いたらそれ以上進めなくなります。
Animation Speed：画像がどのくらい時間かけて入れ替わるかをミリ秒で設定します。
Advancedタブ
Image Settings
Slides on Desktop：PCの場合のスライド表示されている画像枚数を設定します。スライド表示の場合だけ設定できます。フェードの場合は設定できません。
Slides on Laptop：ラップトップの場合の スライド表示されている画像枚数を設定します。スライド表示の場合だけ設定できます。フェードの場合は設定できません。
Slides on Tablet：タブレットの場合のスライド表示されている画像枚数を設定します。スライド表示の場合だけ設定できます。フェードの場合は設定できません。
Slides on Mobile：モバイルの場合のスライド表示されている画像枚数を設定します。スライド表示の場合だけ設定できます。フェードの場合は設定できません。
Slides to Scroll：一度に何枚づつスライドするか設定します。
Center Mode：ONにすると、表示されているメイン画面の両端に隣の画面が微妙に見える状態になります。OFFだと、表示されているメイン画面以外は見えません。
Variable Width：ONにすると、上記Slides on Desktopなどで指定した数値と無関係に表示される枚数が勝手に計算されるようです。Slider Heightと元々の画像の大きさとの関係で枚数が決まるような感じですが、詳細が分かりません。おそらく裏でSlickが動いているようなので、SlickのVariable Widthがtrueに設定されるのだと思いますが、定かではありません。
Spacing：画像の表示間隔を「None」、「Small」、「Middle」、「Large」、「Huge」から選択します。
Control Settings
Arrows：スライダー矢印の表示位置を「Outside（スライダー領域の外の左右）」、「Inside（スライダー領域の内側左右両端）」、「None（表示しない）」から選択します。
Dots：スライダーの点点の表示位置を「Outside（スライダー領域の外の下）」、「Inside（スライダー領域の内側一番下）」、「None（表示しない）」から選択します。
まとめ
設定個所は以上です。
Media&Text Sliderに似ていますね。
画像にリッチなオーバーレイを重ねたい場合は Media&Text Slider 、シンプルにスライドを表示したい場合はImage Sliderという使いわけでしょうか。