Smart Slider 3 Proで、レスポンシブ対応のカルーセルを作成
Smart Slider 3 Proでは、シンプルスライダーの他に、カルーセルとショーケースを使用することができます。今回は、ショーケースからカルーセルスライダーを作成する方法を紹介します。
出典 : Smart Slider3
一つ目は、横長バナーのカルーセル。2つ目は、縦長バナーのカルーセル。3つ目は縦スクロールのカルーセルです。全て5つの画像をスライド表示させています。
横長バナー
16 : 9バナーのカルーセルで、主にメインスライダーの下などに入れる小さめのカルーセルです。前後のバナーの一部が見えるようになっていています。
Smart Slider＞New Project＞スライダー＞ショーケースを選択し、作成ボタンをクリックします。
Size
では、今回設定したサイズを紹介します。スライダーサイズは、横1400px、高さ338pxに設定します。Slide Sizeは、Slide Width600px、Slide Height338px、Slide Distance0pxに設定しました。Slide Sizeは、バナーのサイズで、16 : 9となるように設定しました。スライダーサイズの高さは、Slide Heightと同じ値にしています。Slide Distanceは、スライド間のサイズです。
レイアウトは、Boxedにチェックして、DownscaleのみONにします。Min Heightは0pxにします。
| 項目 | 設定値 |
|---|---|
| スライダーサイズ | 幅 : 1400px 高さ : 338px |
| Slide Size | Slide Width : 600px Slide Height : 338px Slide Distance : 0px |
| レイアウト | Boxed |
| Downscale | ON |
| Upscale | OFF |
| Min Height | 0px |
操作
PCのみカーソルを合わせると、矢印が表示されるようにします。ページコントロールは、スライダーの下に設定するため、PositionをOuter 下 +10pxに設定しました。主な設定値は以下の通りです。
| 項目 | 設定値 |
|---|---|
| 矢印 | チェック有 |
| 前の位置 | Middle 左 +15px |
| 次の位置 | Middle 右 +15px |
| Image Width – Desktop | 30px |
| ホバー時の表示 | ON / デスクトップ |
| ページコントロール | チェック有 |
| Position | Outer 下 +10px |
アニメーション
アニメーションはデフォルトのままです。
| 項目 | 設定値 |
|---|---|
| プリセット | デフォルト |
| Duration | 800 |
| Easing | Quad Out |
| 方向 | 水平方向 |
自動再生
自動再生にチェックを入れ、5秒で切り替わるように、Slide Durationを5000に設定します。
| 項目 | 設定値 |
|---|---|
| 自動再生 | チェック有 |
| Slide Duration | 5000 |
| 自動的に開始 | ON |
| Infinite Loop | ON |
縦長バナー
縦長のバナーのカルーセルです。バナーの間にスペースを設定し、尚且つSPでも前後のバナーが見えるように調整します。今回は画像を使用しましたが、Blankを作成し、中にテキストや画像を入れることもできます。尚、アニメーション、自動再生の設定は横長バナーと同じです。
一般設定
デフォルトではSPの前後のバナーは少ししか見えません。バナー間にスペースを入れるので、前後のバナーが見えなくなる可能性があるので、モバイルのみ「Side Spacing」を 0px 60px 0px 60pxに設定します。
| 項目 | 設定値 |
|---|---|
| Side Spacing | デスクトップ : OFF タブレット : OFF モバイル : ON / 0px 60px 0px 60px |
Size
バナー間にスペースを入れるため、「Slide Distance」を20pxに設定します。
| 項目 | 設定値 |
|---|---|
| スライダーサイズ | 幅 : 1400px 高さ : 850px |
| Slide Size | Slide Width : 600px Slide Height : 850px Slide Distance : 20px |
| レイアウト | Boxed |
| Downscale | ON |
| Upscale | OFF |
| Min Height | 0px |
操作
基本的に横長バナーと同じですが、ページコントロールを外しました。
| 項目 | 設定値 |
|---|---|
| 矢印 | チェック有 |
| 前の位置 | Middle 左 +15px |
| 次の位置 | Middle 右 +15px |
| Image Width – Desktop | 30px |
| ホバー時の表示 | ON / デスクトップ |
| ページコントロール | チェック無 |
スライド
バナーを角丸にするためにSlide Design＞Slide Border Radiusを10pxに設定します。
| 項目 | 設定値 |
|---|---|
| Side Border Radius | 10px |
縦スライド
最後は、縦スライドのカルーセルです。横スライドと違い、フリックしにくいので、下にサムネイルを表示しました。ブロックエディターでカラムの横幅をカルーセルのサイズに合わせて600pxに固定しています。これによって、サムネイルが多くなったりしても、矢印が現れ、横スライドで表示することができます。
Size
高さは、サムネイルが下に入るので、750pxにして、SPでも全て表示されるように設定します。
| 項目 | 設定値 |
|---|---|
| スライダーサイズ | 縦 : 600px 高さ : 750px |
| Slide Size | Slide Width : 600px Slide Height : 338px Slide Distance : 15px |
| レイアウト | Boxed |
| Downscale | ON |
| Upscale | OFF |
| Min Height | 0px |
操作
サムネイルにチェックを入れ、キャプションなしのテンプレートを選択します。サムネイルを中央揃えにするため「サムネイルの整列」を中央にします。
| 項目 | 設定値 |
|---|---|
| 矢印 | チェック無 |
| サムネイル | チェック有 |
| 画像 | チェック有 / 100px / 60px |
| Position | Outer 下 |
| サムネイルの整列 | 中央 |
| ページコントロール | チェック無 |
アニメーション
縦スライドにするため、方向を垂直方向にします。
| 項目 | 設定値 |
|---|---|
| プリセット | デフォルト |
| Duration | 800 |
| Easing | Quad Out |
| 方向 | 垂直方向 |
自動再生
サムネイルや、前後のバナーをクリックしたら、自動再生が停止する設定にするため、「Stop On Click」をONにします。
| 項目 | 設定値 |
|---|---|
| 自動再生 | チェック有 |
| Slide Duration | 5000 |
| 自動的に開始 | ON |
| Infinite Loop | ON |
| Stop On Click | ON |
以上でカルーセルの説明は、終了です。この設定で作成すれば、レスポンシブ対応のカルーセルが作成できます。Smart Slider 3 Proでは、色々なカルーセルを作成できるので、今後のBLOGで設定を紹介していきたいと思います。Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。
