WordPressのプラグイン「Lexiata XSlider」で、WEBサイトに下記のような自動で切り替わるスライダーを作る方法をご紹介します。
目次
Lexiata XSliderとは
Lexiata XSliderは、ショートコードでWEBページにスライダーを設置できるWordPressプラグインです。ライブラリなどを使っていないようで、軽量とのことでした。
Lexiata XSliderをインストール・有効化する
WordPress管理画面にログインして、プラグインを準備します。「プラグイン」→「新規追加」をクリックして、検索欄で「Lexiata XSlider」と検索します。「今すぐインストール」→「有効化」をクリックすると、管理画面左側のメニューに「XSlider」が追加されます。
スライダーを作成する
管理画面左側のメニューで「XSlider」を選択すると、「Slider projects」画面が表示されます。ここにはこれまでに作成したスライダーが表示されます。「New projects」をクリックして新しくスライダーを作成します。
「New projects」をクリックすると「Create new projects」画面が表示されます。内容は後からでも変更できるので、そのまま「Create projects」をクリックします。
「Create projects」をクリックすると、スライダーのダッシュボード（編集画面）が表示されます。「ADD SLIDE」をクリックしてスライダーに表示する画像を追加します。
「Image」をクリックします。
スライダーに追加するスライドの設定画面が表示されます。「Select Slide Image」でWordPressのメディアライブラリから画像を選択できます
画像を選択したら「Save slide」で保存します。
保存するとその画像がスライダーに反映されます。
同じ要領で、スライダーに画像を追加します。
「Size」タブ → 「BORDER RADIUS」で「Subtle」を選択し、「Save」ボタンで保存します。
「Controls」タブ → 「Bullets」をオンにして、「Pill」を選択し、「Save」ボタンで保存します。
「Animations」タブ → 「Main animation」で「Zoom fade」を選択し、「Save」ボタンで保存します。
「Autoplay」タブ → 「Slide duration」を「5000」ミリ秒にして、「Save」ボタンで保存します。
スライダーのテスト
「General」タブでショートコードをコピーします。
WordPressのWebページにショートコードを設定して、スライダーが表示されるか確認します。
他のWordPressプラグインでサムネイル付きスライドを表示する方法
WordPressサイトの場合は他にもサムネイル付きスライドを表示することができるプラグインがあります。
- Smart Slider3で自動で切り替わるサムネイル付きスライドを実装する方法
- UltimateSliderで自動で切り替わるサムネイル付きスライドを実装する方法
- Master Sliderで自動で切り替わるサムネイル付きスライドを実装する方法
プラグインを使わずにサムネイル付きスライドを表示する方法
JavaScriptのスライダーライブラリを使うとプラグインを使わずに自動で切り替わるサムネイル付きスライドを表示させることができます。
- Slick.jsで自動で切り替わるサムネイル付きスライドを実装する方法
- Swiper.jsで自動で切り替わるサムネイル付きスライドを実装する方法
- Splide.jsで自動で切り替わるサムネイル付きスライドを実装する方法
- Tiny Slider2で自動で切り替わるサムネイル付きスライドを実装する方法
- Keen-Slider.jsで自動で切り替わるサムネイル付きスライドを実装する方法
まとめ
WordPressのプラグイン「Lexiata XSlider」で、WEBサイトに自動で切り替わるスライダーを作る方法をご紹介しました。
Lexiata XSliderは、ショートコードでWEBページにスライダーを設置できるWordPressプラグインです。お試しください。