【Smart Slider 3】スライダー設定⑤ 自動再生【WordPress】

Smart Sliderの『セッティング：自動再生』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。

また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。

本記事は、パソコンの画面から見ていただくことを推奨します。

スライダー設定 (自動再生)
ボタン
Indicator
まとめ

スライダー設定 (自動再生)

スライダー設定の『自動再生』について解説していきます。
『自動再生』をオンにすると、ユーザーによる操作なしに、自動的にスライドの切替えが再生されるようになります。

『Slide duration』では、次のスライドへの切替え間隔を設定します。8000MS(ミリセカンド)は 8秒です。適切なタイミングになるよう調整しましょう。

『自動的に開始』は、オフにした場合、自動的には再生されなくなりますが、ユーザーが「自動再生ボタン」等を押すことで、自動再生させることが出来ます。

『Infinite Loop』はオンで無限再生になります。オフの場合は、右に表示される『Finish Autoplay』にて自動再生をストップする条件を設定できます。
(＊この時、ひとつ前に『Allow Restart』のスイッチが表示されます。オンの場合、再生終了後も自動再生ボタン等でリスタートが可能。)

・間隔：数字を入力する
・Interval Modifier：
　・loops：自動再生をループさせる回数
　・slide count：スライド切替えの回数
　・slide index：何番のスライドか
・Stops On：「指定したスライド or その次のスライド」で再生終了

『Stop On Click』がオンの場合、マウスクリックで自動再生がストップします。
『Stop On Mouse』では、スライダーにカーソルが乗る、あるいは離れる、どちらかの時に自動再生をストップさせることが出来ます。

『Stop On Media』がオンの場合、動画などが配置されたスライドで、動画が再生され始めたら、スライダーの自動再生がストップします。

『Resume On Click』がオンの場合、マウスクリックで自動再生が再開できます。
『Resume On Mouse』では、スライダーにカーソルが乗る、あるいは離れる、どちらかの時に自動再生を再開させることが出来ます。

『Resume On Media』がオンの場合、動画などが配置されたスライドで、動画再生が終了したら、スライダーの自動再生が再開します。

ボタン

『ボタン』をオンにすると、スライドに自動再生/停止ボタンを表示させることが出来ます。

『Play』でボタンのデザインを設定できます(オリジナル画像の指定も可)。『色』でボタンの色を設定。『スタイル』で設定画面を開き、ボタンのスタイルをカスタマイズ出来ます。

『ミラー』オンであれば、一時停止ボタンは再生ボタンと同系統のデザインが指定されます。一時停止ボタンを変更したい場合は、オフにすると個別に設定できます。

『Image Width』でデバイス(PC、タブレット、スマホ)ごとに、ボタンのサイズを指定できます。
『Position』でボタンの位置を指定します(デフォルトは右上)。

『ホバー時の表示』をオンにすると、カーソルを合わせた時だけ、自動再生ボタンを表示するようになります。
また『Hide On』にて、デバイスごとに自動再生ボタンを全く表示させなくすることも出来ます。
(例：スマホだけ自動再生ボタン非表示など。)

『非表示スライドID』：
たとえば、1枚目と3枚目のスライドでは自動再生ボタンを非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

Indicator

『Indicator』をオンにすると、スライド切替えまでの残り時間を、円グラフやバーで視覚的に表示します。
『Position』『Size』で表示位置とサイズを設定。『Line Thicness』は線の太さ、『Color』で色を変更できます。『スタイル』からは、さらに見た目をカスタマイズ出来ます。

『ホバー時の表示』をオンにすると、カーソルを合わせた時だけ、Indicatorを表示するようになります。
また『Hide On』にて、デバイスごとに Indicatorを全く表示させなくすることも出来ます。
(例：スマホだけ Indicator非表示など。)

『非表示スライドID』：
たとえば、1枚目と3枚目のスライドではIndicatorを非表示にしたいという場合、『非表示スライドID』の欄に『1,3』とカンマで区切って入力します。

まとめ

今回は、『スライダー設定』の『自動再生』について解説いたしました。
単に「自動再生」といっても、再生やストップの条件付けや、ボタンによる制御などが出来るので、思い通りの設定ができるように、しっかり理解しておきたいパートとなります。

ーーー

『スライダー設定』には、この後に、
『最適化』『スライド』『開発者』などの項目があり、それらの詳細についても、あらたに関連記事を追加していきます。