今回はWordPressプラグイン「Smart Slider3」を使って、自動で切り替わるサムネイル付きスライドをWordPressサイトに表示する方法をご紹介します。

サムネイル付きスライドの完成イメージ

メインのスライドが自動で切り替わり、それに連動してサムネイルスライドもアクティブな状態が切り替わる仕組みです。

サムネイルをクリックすると、メインスライドも切り替わります。

Smart Slider3の設定方法

Smart Slider3のインストール・有効化

サムネイル付きスライドを表示したいWordPressにSmart Slider3をインストールして有効化します。

スライダープロジェクトを作成

Smart Slider3を有効化するとWordPress管理画面左側のメニューに「Smart Slider」が表示されます。

表示されたメニューからダッシュボードをクリックします。

「GO TO DASHBOARD」をクリックしてダッシュボードを開きます。

「NEW PROJECT」をクリックしてプロジェクトを作成します。

「Create a New Project」をクリックしてプロジェクトを新規作成します。

プロジェクトの基本設定はすべて初期値のままとして「作成」をクリックします。

スライド画像の設定

「スライドを追加」をクリックします。

「画像」をクリックします。

メディアライブラリからスライドに設定する画像を選択します。

選択した画像が設定されます。

サムネイルスライドの設定

「操作」のタブをクリックします。

「サムネイル」のスイッチをONとします。

サムネイルの設定値が表示されるので編集します（サンプルではすべて初期値のままとしています。）

自動再生の設定

「自動再生」のタブをクリックします。

「自動再生」のスイッチをONとします。

自動再生の設定値が表示されるので編集します（サンプルではSlide durationとStop on clickを変更し、他すべては初期値のままとしています。）

スライダープロジェクトを保存する

「保存」をクリックします。

スライダーを確認する

スライドを表示したいWEBページに、保存したスライダープロジェクトのショートコードを設定すると、自動で切り替わるサムネイル付きスライドが表示されます。

プラグインを使わずにサムネイル付きスライドを表示する方法

JavaScriptのスライダーライブラリを使うとプラグインを使わずに自動で切り替わるサムネイル付きスライドを表示させることができます。

• Slick.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Swiper.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Splide.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Tiny Slider2で自動で切り替わるサムネイル付きスライドを実装する方法
• Keen-Slider.jsで自動で切り替わるサムネイル付きスライドを実装する方法

サムネイル付きスライドのWEBサイト制作事例

今回のようなサムネイル付きスライドを表示したWEBサイトの制作事例をご紹介します。

• 新相武株式会社様のWEBサイトを制作しました

まとめ

今回はWordPressプラグイン「Smart Slider3」を使って、自動で切り替わるサムネイル付きスライドをWordPressサイトに表示する方法をご紹介しました。

プラグインを活用することで、複雑な設定なしでスライドを作ることができます。

WEBサイトに動きのある要素を取り入れたい方は、ぜひこの方法を試してみてください。

WEBサイトの制作や保守についてお困りのことがあれば、お気軽にご相談ください。