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

Word Pressおすすめ, カスタム, プラグイン, 無料, 高機能

こんにちは!
サイバーブリッジ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 tagsalt属性の設定
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)

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

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

Posted by リク