![](https://cxg-design.jp/wp-content/uploads/2024/03/f3478ea408eec2dfa2945128efca9a6e.png)
Smart Slider Proのカルーセルで、複数バナー表示のスライダーを作成
以前、Smart Slider3の「ショーケース」で、前後のバナーが見えるカルーセルスライダーを作成しました。
![](https://cxg-design.jp/wp-content/uploads/2023/10/3716d4b092b75c2f4eefd6e87ce3c743-2000x1156.png)
出典 : Smart Slider3
今回は、複数のバナーを表示するカルーセルスライダーを作成します。
カルーセルとショーケースの違い
ショーケースで作成するカルーセルスライダーは、前後のバナーが一部表示されます。前後のバナーをクリックしても、スライダーが移動するだけで、リンクページに移動はしません。カルーセルで作成するカルーセルスライダーは、複数のバナーが切れずに表示され、クリックすると、リンクページに移動します。
今回のDEMOは最大幅を1550pxに設定し、PCでは3〜5枚、タブレットでは2枚、SPでは1枚のバナーが表示されるカルーセルを作成しました。リンクは指定していません。
横長のバナーを8枚設定しました。メインのスライダーの下に来るような小さなバナーです。
Create Slider
![](https://cxg-design.jp/wp-content/uploads/2024/03/9be7dd021a4dc5be6b66344ac9eb4d9e.png)
Smart Slider>Create Sliderをクリックし、Create a new projectをクリックします。Project Typeをスライダー、Slide Typeをカルーセルに設定し、作成ボタンをクリックします。スライドを追加から8枚のバナー画像を読み込みます。
![](https://cxg-design.jp/wp-content/uploads/2024/03/e51a7b7d126ec369f30b304be55f5017.png)
スライドを追加>画像で8枚のバナー画像を読み込む
一般設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/7dc0d45c339990cad0e81c6fe32afc3a.png)
まず、名前を入力します。スライダーを左右中央配置にするため、「整列」を中央に設定します。
項目 | 設定値 |
---|---|
整列 | 中央 |
Size
![](https://cxg-design.jp/wp-content/uploads/2024/03/3014d2f76a288abdd5738a686407f62f.png)
PCで最大5枚のバナーを表示させるため、バナーの幅を300pxスライダーの幅を1550pxに設定します。
項目 | 設定値 |
---|---|
スライダーサイズ | 幅 : 1550px 高さ : 170px |
Slide Size | Slide Width : 300px Slide Height : 170px Max Pane Width : 1550px Minimum Slide Distance : 10px |
レイアウト | Boxed |
Downscale | チェック有 |
Upscale | チェック無 |
操作
![](https://cxg-design.jp/wp-content/uploads/2024/03/5f7978f6c95948c8c0ba46bb8b7cd87e.png)
矢印をバナーの外側5pxに設定し、SPの時は表示しません。ページコントロールは、表示します。
項目 | 設定値 |
---|---|
矢印 | チェック有 |
前の位置 | 左 + 5px |
次の位置 | 右 + 5px |
Hide On | SP : チェック有 |
ページコントロール | チェック有 |
アニメーション
![](https://cxg-design.jp/wp-content/uploads/2024/03/eba8f5e7ad8208f54a60602a687488ca.png)
1枚ずつスライドさせたいので、Single SwitchをONにします。「Justify Slides」が表示されるので、中央にチェックを入れます。
項目 | 設定値 |
---|---|
Main Animation | 水平方向 |
Duration | 800 |
Carousel | ON |
Single Switch | ON |
Justify Slides | 中央 |
自動再生
![](https://cxg-design.jp/wp-content/uploads/2024/03/cbbe892ae1eadd654f0bf1e6a298c82c.png)
自動再生にチェックを入れます。5秒でスライドさせるため、Slide Durationを5000MSに設定します。
項目 | 設定値 |
---|---|
自動再生 | チェック有 |
Slide Duration | 5000 |
自動的に開始 | ON |
Infinite Loop | ON |
以上で今回の説明は終了です。複数バナー表示の場合、形が決まっているので、ショーケースに比べて遊びの要素は少ないです。今回は、多めの8枚で作成しましたが、想定されるバナーの数に合わせて、サイズを変更して作成します。