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