Smart Sliderの『セッティング：開発者(Developer)』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
スライダー設定 (開発者)
スライダー設定の『開発者(Developer)』について解説していきます。
開発者
『右クリックを禁止する』をオンにすると、スライダー上での右クリックを出来ないようにします。
『Block Carousel』をオンにすると、スライド切替えが垂直方向のスライダーの場合、最後のスライドまで行ったら、スライドの切替えを停止します。
ページを下にスクロールしようとしてるのに、スライドが切り替わるだけで、ページを下にスクロール出来ない、という現象を防止できます。
Clear Before、Clear After
これらは、デフォルトでオンになっています。
ブラウザサイズを変更する際など、ブラウザ幅に合わせた、スライダー廻りのレイアウト変更や、スライダーサイズ変更に問題が出ずらくなります。
Hide Scrollbar
こちらをオンにすると、ページのスクロールが出来なくなります。
フルページのスライダー (スライダーのみで構成されているページ)など、ページスクロールの必要がない特殊なページ以外は、オフのままにしておきましょう。
Scroll To Slider
これは、矢印やボタンなどの操作でスライドを切替える際、スライダーが一部しか表示されていなくても、ページをスライダーの位置までスクロールバックします。
『Edge』では、スクロールバックを、ページ上部あるいは下部、どちらに合わせて行うか選択できます。
遅延 (Lightbox・タブ用)
こちらを有効にすると、スライダーの読み込みに+200msの遅延が生じます。これにより、タブ環境やライトボックス内で、スライダーが正しく表示されるようになります。
Legacy Font Scale
この機能はバージョン3.5以前に作成された絶対位置レイヤーの非適応フォントサイズを復元します。しかし、有効化するとウェブサイトのパフォーマンスに影響を与える可能性があるため、無効のままにしておくことをお勧めします。
Slider CSS Classes
ここでは、スライダーのcontainerに、カスタムCSSクラスを追加できます。クラスはカンマで区切ります。
『CSS』に、カスタムCSSコードを記述します。（CSSの基礎理解が必要）
JavaScript コールバック
ここには、JavaScriptコードを記述できます。(コーディングの基礎知識が必要)
Loading Animation Waiting Time
ここでは、ローディングアニメーションが表示されるまでの待機時間を設定できます。
例えば、5000MSと設定しておくと、スライダーの表示に５秒以上かかる場合にのみ、ローディングアニメーションが表示されます。
投稿ID (１行に１つずつ)
スライダーの「保存」が行われた際、ここで指定したIDの投稿ページのキャッシュがクリアされます
サイトにキャッシュプラグイン等を導入している場合に有用で、ページとスライダーを同期状態に保てます。
Fallback Slider (ID Or Alias)
１枚１枚のスライドは「公開」「非公開」を選択できます。すべてのスライドを非公開に設定するとスライダーに何も表示するものが無くなってしまいます。
このような場合に表示される別のスライダーを、そのIDまたはエイリアス(別名)で指定しておくことが出来ます。
まとめ
今回は、『スライダー設定』の『開発者』について解説いたしました。
本記事にて『スライダー設定』についての解説はすべて終了いたしました。
次からは、スライダーを構成する個々のスライド自体の編集『スライド編集』の詳細について、あらたに記事を追加していきます。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
コメント