こちらのスライダーは非推奨となっております。非推奨のスライダーは体感的に、複数設置すると表示速度が遅くります(2022/03/20現在)
スライダーブロックは、その名の通り画像をスライドさせるブロックです。
トップページにスライダーを追加したい人や、商品紹介をスライドで見せたいときにおすすめです。
初めてWordPressを触った人も最初に作ってみたいのはスライダーではないでしょうか。
魅力的な画像を美しいスライダーとして表示します。
仕様
設定項目は沢山あります。
幅の設定
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-07_21h19_51-1.png)
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-07_21h20_36.png)
幅広は標準の幅です。
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-07_21h20_51.png)
トップページ画像にする場合は1920px幅にしています。
ドットインジケータを表示する
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h15_32.png)
白がOFF、青がONです。
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h21_54.png)
前/次の矢印
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h15_38.png)
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h26_53.png)
ボタンを押すことで、次のスライド画像にスライドします。
スライドアニメーション速度
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h15_51.png)
自動再生の間隔
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h15_58.png)
こちらの単位は(秒)です。
フェードを有効にする
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h16_04.png)
お客様の要望は多いです。フェードという言葉で通じないことが多いです。
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/462f4ca6dac4ecaec51a1d5edd87ba55.gif)
スライダーの方向を右から左に変更
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-05_23h16_09.png)
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/d84f9823b1021f3beda04f54aa09338c.gif)
表示するスライド数/スクロールするスライド数
![](https://yamasakidaisuke.com/wp-content/uploads/2019/11/2019-11-07_21h09_23-1.png)
「スライダー」の使用例
例:正方形でスライドさせてみた
設定:スライドアニメーション700ミリ秒、ドットインジケータON,前/次の矢印ONフェードOFF
例:全幅(画像サイズ1920px×500px)、フェード、自動再生3秒
ポイント:写真サイズを合わせる