Smart Slider Proのカルーセルで、複数バナー表示のスライダーを作成

以前、Smart Slider3の「ショーケース」で、前後のバナーが見えるカルーセルスライダーを作成しました。

今回は、複数のバナーを表示するカルーセルスライダーを作成します。

今回のDEMOは最大幅を1550pxに設定し、PCでは3〜５枚、タブレットでは2枚、SPでは1枚のバナーが表示されるカルーセルを作成しました。リンクは指定していません。

横長のバナーを8枚設定しました。メインのスライダーの下に来るような小さなバナーです。

Create Slider

Smart Slider＞Create Sliderをクリックし、Create a new projectをクリックします。Project Typeをスライダー、Slide Typeをカルーセルに設定し、作成ボタンをクリックします。スライドを追加から8枚のバナー画像を読み込みます。

スライドを追加＞画像で8枚のバナー画像を読み込む

一般設定

まず、名前を入力します。スライダーを左右中央配置にするため、「整列」を中央に設定します。

項目	設定値
整列	中央

Size

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	チェック無

操作

矢印をバナーの外側5pxに設定し、SPの時は表示しません。ページコントロールは、表示します。

項目	設定値
矢印	チェック有
前の位置	左 + 5px
次の位置	右 + 5px
Hide On	SP : チェック有
ページコントロール	チェック有

アニメーション

1枚ずつスライドさせたいので、Single SwitchをONにします。「Justify Slides」が表示されるので、中央にチェックを入れます。

項目	設定値
Main Animation	水平方向
Duration	800
Carousel	ON
Single Switch	ON
Justify Slides	中央

自動再生

自動再生にチェックを入れます。5秒でスライドさせるため、Slide Durationを5000MSに設定します。

項目	設定値
自動再生	チェック有
Slide Duration	5000
自動的に開始	ON
Infinite Loop	ON

以上で今回の説明は終了です。複数バナー表示の場合、形が決まっているので、ショーケースに比べて遊びの要素は少ないです。今回は、多めの8枚で作成しましたが、想定されるバナーの数に合わせて、サイズを変更して作成します。