mixhost 無料で利用できるスライド作成プラグイン「Smart Slider 3」の設定方法

・スライダー

・ブロック

※Project typeがスライダー時のみ

・シンプル

・カルーセル(Pro)

・ショーケース（Pro)

・名前

・幅(px)

・高さ(px)

・レイアウト：Boxed、全幅、全画面(Pro)

・幅(px)：1200

・高さ(px)：600

・レイアウト：全幅

※幅、高さ、レイアウトについては、

Webサイトのデザインに合わせて調整をオススメします。

・サムネイル：プロジェクトのサムネイル画像

・ARIA label：スクリーンリーダー用のラベル

・サムネイル：任意の画像

・ARIA label：空欄

・別名：指定した別名「alias」を含んだショートコードを【公開】に生成します。

・Use as anchor：スライダーの前に空のdivを作成します。

・Smooth scroll：スライダーまでスクロールを許可します。

・Switch slide：スライダー何番目かを指定して切り換えを行います。

・別名：任意のID名

・Use as anchor：有効

・Smooth scroll：有効

・Switch slide：無効

・整列（通常、左、中央、右）：スライダーの位置

・マージン（外側の余白）：上下左右の余白[px]を指定します。

※入力欄の左をクリックすると上下左右の欄が表示されます。

・整列：通常

・マージン（外側の余白）：0,500,0,100

高さを制限することができます。

・幅

・高さ

・スライドの幅制限（デスクトップ、タブレット、モバイル）

・高さ：600

・スライドの幅制限：ON

指定します。

・Global breakpoints：

・Orientation（縦向き、横向き）

・端末ごとの幅（デスクトップ、タブレット、モバイル）

サイズ

・Global breakpoints：ON

・Orientation：縦向き

※表示方法（Boxed、全幅）で以下の項目が変化します。

〇Boxed

・Downscale：スライダーを縮小して、設定したスライダー幅より小さくすることができます。

・Upscale：スライダーを拡大して、設定したスライダー幅よりも広くすることができます。

・Min height：スライダーが設定されたpx値より小さくなるのを防ぎます。

〇全幅

・Min height：スライダーが設定されたpx値より小さくなるのを防ぎます。

・全幅を強制：スライダーを強制的にコンテナの外に出して、画面の幅と同じ幅にすることができます。

・Overflow-X：スライダーはoverflow-x：をサイトの本文またはHTMLタグに非表示にして、特定のアニメーション中に垂直スクロールバーが表示されないようにします。

・Adjust slider width to：スライダーの親要素の1つのCSSセレクターを指定すると、スライダーはブラウザーウィンドウの幅ではなくこの要素の幅を使用しようとします。

・Min height：0[px]

・全幅を強制：ON

・Overflow-X：body

・Adjust slider width to：body

・Mouse wheel：マウスホイールでスクロールすると、スライドを切り替えを設定します。

・キーボード：キーボードを使用してスライドを切り替えることができます。方向は、ドラッグオプションの値に基づいています。[無効]または[水平]に設定されている場合は、左右の矢印を使用してスライドを切り替えることができます。

・Mouse wheel：無効

・キーボード：OFF

・Previous：矢印の形状を選択します。

・色：矢印の色を指定します。

・ホバー：矢印へマウスカーソルを合わせた時の色を指定します。

・矢印：矢印の背景色やサイズなどのスタイルを調整します。

・前/次の位置：矢印の位置を調整します。

・Previous/Next alt tag：画像の矢印にaltタグを追加します。

・Base64：Base64でエンコードされた矢印画像は読み込みが速く、色付け可能です。ただし、最適化プラグインでは、関連するコードにエラーが含まれていることが多いため、矢印が読み込まれない場合は、このオプションをオフにしてください。

・ホバー時の表示：カーソルをスライダーの上に置いたときに、矢印がデスクトップ画面にのみ表示されます。タブレットやモバイル画面では、常に表示されます。

・Hide on：デスクトップ、タブレット、またはモバイルビューで矢印を非表示にすることができます。

・Previous：任意の形状

・色：FFFFFFF0

・ホバー：ON

・矢印：デフォルト

・前/次の位置：デフォルト

・Previous/Next alt tag：previous arrow/next arrow

・Base64：ON

・ホバー時の表示：ON

・Hide on：OFF

・点：色とドット表示オプションを選択します。

・バー：点の下部に表示するバーのスタイルを調整します。

・画像：スライドのサムネイルを表示やスタイルを指定します。

・ホバー時の表示：スライダーの上にカーソルを置いた時の表示を選択します。

・Hide on：端末ごとに点の表示を選択します。

・点：デフォルト

・バー：デフォルト

・画像：OFF

・ホバー時の表示：OFF

・Hide on：OFF

・Text bar：テキストバーの表示デザインを選択します。

・Position：スライダーにバーを配置する位置を選択します。

・Animate：アニメーションのフェードアウト/フェードインをオンにすることができます。

・バー：テキストバーの標準状態の色を選択したり、大きくしたり小さくしたりするなどスタイルを設定します。

・タイトル：説明を表示するかどうかを設定できます。

・説明：説明を表示するかどうかを設定できます。

・Slide count：現在のスライドのインデックスとスライド数に置き換えることができます。

・全幅：バーの幅を指定します。

・区切り：タイトルとバーの説明の間にある、それらを区切るためのテキストです。

・整列：バーにテキストを揃えることができます。

・ホバー時の表示：カーソルをスライダーに合わせたときに、テキストバーがデスクトップ画面にのみ表示されます。

・Hide on：端末ごとにテキストバーを非表示にすることができます。

・Position：下　中央

・Animate：OFF

・バー：デフォルト

・タイトル：デフォルト

・説明：OFF

・Slide count：OFF

・全幅：OFF

・区切り： -

・整列：左

・ホバー時の表示：ON

・Hide on：OFF

・高さ：PC上のサムネイル画像の高さを調整します。

・Tablet width：タブレットのサムネイル画像の幅を調整します。

・高さ：タブレットのサムネイル画像の高さを調整します。

・Mobile width：モバイルのサムネイル画像の幅を調整します。

・高さ：モバイルのサムネイル画像の高さを調整します。

・Position：スライダーにサムネイルを表示する位置を選択します。

・サムネイルの整列：サムネイルバーの最初、中央、または最後の部分にサムネイルを配置するか、サムネイルバーの間にスペースを入れます。

・バー：サムネイルバーのスタイルを設定できます。

・サムネイル：サムネイル全体のスタイルを設定できます。

・キャプション：キャプションのスタイルを設定できます。

・タイトル：スライドのタイトルをサムネイルに表示するように選択できます。

・説明：スライドの説明を表示します。

・Placement：テキストがサムネイルの前または上、あるいはサムネイルの後に比較される場所です。

・Size：水平または垂直のサムネイルの使用に基づいて、キャプションに割り当てるスペースの量です。

・ホバー時の表示：スライダーにカーソルを合わせると、サムネイルがデスクトップ画面にのみ表示されます。

・Hide on：端末ごとにサムネイルを非表示にすることができます。

・高さ：80

・Tablet width：120

・高さ：80

・Mobile width：120

・高さ：80

・Position：Outer下

・サムネイルの整列：開始

・バー：デフォルト

・サムネイル：デフォルト

・キャプション：デフォルト

・タイトル：OFF

・説明：OFF

・Placement：オーバーレイ

・Size：100

・ホバー時の表示：OFF

・Hide on：OFF

・Hide on：端末ごとに影を非表示にすることができます。

・Hide on：OFF

・Duration：アニメーションが完了するまでにかかる時間。値が大きいほど、アニメーションの終了にかかる時間が長くなります。

・Duration：400

・Stop on click：スライダーの自動再生は、マウスのクリックまたはタッチで停止します。

・Stop on mouse：マウスアクションで自動再生を停止できます。

・Stop on media：ビデオレイヤーまたはライトボックスが表示されているスライドがある場合、そのビデオまたはライトボックスが開始されると、スライドは停止します。

・Resume on click：スライダーの自動再生は、マウスのクリックまたはタッチで再開されます。

・Resume on mouse：マウスアクションで自動再生を再開できます。

・Resume on media：ビデオレイヤーまたはライトボックスが表示されているスライドがある場合、そのビデオが終了するか、ライトボックスが閉じられると、自動再生が再開されます。

・Slide duration：8000

・Stop on click：ON

・Stop on mouse：off

・Stop on media：ON

・Resume on click：OFF

・Resume on mouse：off

・Resume on media：ON

・色：自動再生ボタンの色を指定します。

・スタイル：背景色など、ボタンをカスタマイズできます。

・Position：ボタンの位置を設定できます。

・ホバー時の表示：マウスがスライダーの上にある場合にのみ表示できます。

・Hide on：端末ごとにボタンを非表示にすることができます。

・Play：任意のデザイン

・色：デフォルト

・スタイル：デフォルト

・Position：上右＋15px

・ホバー時の表示：OFF

・Hide on：OFF

・表示時に再生する：スライダーまでスクロールするとアニメーションが開始されますが、オフにすると、スライダーが読み込まれるとすぐにアニメーションが開始されます。

・At：アニメーションを開始するために表示する必要のあるスライダーの量を決定します。

・表示時に再生する：ON

・At：50

・Resize Thumbnail：スライドの背景から小さな画像を作成できます。

・Resize Thumbnail：OFF

floatCSSコードを閉じます。

スクロールバーを非表示にします。

・Edge：自動

配置することができスライダーが

読み込まれた後にトリガーされます。

読み込み中のアニメーションをまったく表示したくない場合は、のように大きな値を設定します10000MS。つまり、読み込み中のアニメーションは、スライダーが表示されるまでに10秒以上かかる場合にのみ表示されます。

この方法でページとスライダーの同期を維持できるため、サイトにキャッシュプラグインがある場合に便利です。