【無料プラグイン】レスポンシブ対応の高機能スライダー「Smart Slider 3」の各種設定を簡単に解説！

こんにちは！
サイバーブリッジweb担当の久保田です･:*+.\(( °ω° ))/.:+

前回「Smart Sliderスマート スライダー 3」を使って、簡単にレスポンシブ対応のスライダー(スライドショー)を設置する方法をご紹介しましたのが、「Smart Slider 3」は日本語対応していないので英語ばっかで何がなんだか分からない方のために各種設定を簡単に解説します♪

▼ 前回の記事はこちら ▼

各種設定の解説

一般設定 (GENERAL)

スライダーの一般設定ができます。

Slider name	スライダーを識別するための名前をつける
Alias	エイリアスを入力
Controls	スライダーで有効にしたい操作を設定
Thumbnail	サムネイル画像を設定
Align	スライダーの配置を設定
Slide background image fill	スライド背景画像の配置の仕方を設定

Main animation	スライド時のアニメーション効果を設定
Main animation properties	次のスライドまでの時間を設定 ※ 800MS＝0.8秒
Background animation	背景画像のアニメーションを設定

サイズ設定 (SIZE)

スライダーのサイズと余白の設定ができます。

Slider size	スライダーの幅と高さを設定
Margin	マージン(スライダーの外の余白)を設定

Responsive mode	レスポンシブモードの設定
Mode	スケールモード設定
Slider height	スライダーの高さの最小値と最大値の設定
Maximum slide width	スライドの最大幅の設定

自動再生設定 (AUTOPLAY)

画像の自動再生(自動スクロール)を有効にするか、無効にするか設定できます。

Autoplay

自動再生を有効にするかの設定

最適化設定 (OPTIMAZE)

画像サイズの最適化の設定ができます。

Optimize images

画像の最適化の設定

読み込み速度 (LOADING)

画像の読み込み速度を設定できます。

Play when visible	どの程度まで表示されたら読み込みを開始するかの設定
Load this slider after	現在のスライダーを、ここで指定したスライダーが完全に読み込まれるまで開始しないようにする設定
Delay	遅延時間の設定
Delayed (for lightbox/tabs)	読み込み遅延を行うかの設定

ナビゲーション (ARROWS)

スライドを手動で遷移させる矢印のデザインを設定できます。

Shows on hover	マウスホバー時に矢印を表示するかの設定
Previous	矢印のデザイン
Style	矢印に適用するCSSの指定
Previous position	「前へ」矢印の表示位置
Next position	「次へ」矢印の表示位置
Alt tags	alt属性の設定
Base64 encoding	変換方式の設定

ドットナビゲーション設定 (BULLETS)

画像が複数枚あった場合の、現在の画像の位置を明確にする「●○○」の設定ができます。

Shows on hover	マウスホバー時に表示するかの設定
Thumbnail	サムネイル画像を有効にするかの設定
Position	表示位置の設定
Dot style	ドットナビゲーションのスタイルの設定
Bar style	バーのスタイルの設定

テキストバー設定 (TEXT BAR)

画像のタイトルや説明文の表示・非表示の設定などができます。

Shows on hover

マウスホバー時に表示するかの設定

Position	テキストバーの表示位置の設定
Animate	アニメーション設定
Style	テキストバーのスタイルの設定
Title	タイトルスタイルの設定
Description	ディスクリプションスタイルの設定
Show slide count	スライドの枚数の表示設定
Size	サイズの設定
Separator	セパレータの設定
Align	テキストの行揃えの位置設定

サムネイル設定 (THUMBNAILS)

サムネイル画像の表示・非表示の設定ができます。

Shows on hover	マウスホバー時に表示するかの設定
Thumbnail	サムネイル画像の幅と高さの設定

影の設定 (SHADOWS)

スライダーに影をつけるかの設定ができます。

ざっくりと簡単に説明してきましたが、もっと細かな設定もできますので、あとはご自身で実際に触りながらやってみてください٩( ‘ω’ )و