Arkheのスライダーブロックは本当に神
便利すぎぃ
スライダーブロックの基本設定
まずは、WordPress のエディタ上で「Arkhe スライダー」ブロックを挿入し、以下のように設定してみてください。
- ページネーション：オフ
- 自動再生：有効化
- ループ：有効化
- スライドをセンター寄せにする：チェック（オン）
- スライド遷移の時間：お好み（例：9000）
- 切り替えまでの遅延時間（ms）：1
※ 0 にすると動かなくなるケースがあるので注意 - ナビゲーション矢印：非表示
追加クラスを付与
設定画面の「追加クラス」に loop-slider といったクラス名を付与します。
追加 CSS
下記の CSS をテーマのカスタマイザーや、外観 → カスタマイズ → 追加 CSS などに貼り付けてください。
/* スライダー */
.loop-slider .swiper-wrapper{
transition-timing-function: linear!important;
}
.loop-slider .swiper-slide{
height: auto;
margin-right: 0!important;
}
.loop-slider .ark-block-slider__media{
height: 100%;
max-height: 200px;
}
.loop-slider .ark-block-slider__media .ark-block-slider__img{
object-fit: contain;
}重要ポイント
その他のスタイルは、スライドの高さや画像の表示方法を整えるための調整なのでお好みで変更してください。
transition-timing-function: linear が肝心です。これを設定することでスライドが一定速度で流れていきます。
スライダーを逆向き（左から右へ）に流す方法
「上段は通常（右から左へ）」で、「下段だけ逆（左から右へ）」に流したい場合があります。
Arkhe では、スライダーブロックのオプションを直接カスタマイズするより、CSS の direction プロパティを使ったほうが安定するようです。
1. 追加クラスを付与
逆向きに流したいスライダーブロックには、例として reverse-slider というクラスを付与します。
2. 追加 CSS
以下のように CSS を追加するだけで、スライドが逆向きに流れます。
/* 逆スライダー */
.reverse-slider {
direction: rtl; /* 右から左に流れる */
}ポイント
functions.php で reverseDirection: true を追加しようとすると、Arkhe 本体の data-option と衝突して挙動が安定しない場合があります。そのため、シンプルに CSS で反転させるのがおすすめです。
通常はスライドが「右 → 左」で流れるのに対し、direction: rtl; を指定すると「左 → 右」で流れるようになります。
まとめ
Arkhe スライダーブロックを 無限ループ で流すときは
- スライダーの基本設定（自動再生、ループ、センター寄せ、遅延時間 1 ms など）
- 追加クラス（例：
loop-slider）を付与 transition-timing-function: linear;を入れた独自 CSS で速度を一定化
これらを行うと、スライドが無限にスムーズに流れるようになります。
また、逆向きに流したい 場合は
- 追加クラス（例：
reverse-slider）を付与 .reverse-slider { direction: rtl; }を追加 CSS に書く
という流れで簡単に実装できます。
Arkhe スライダーは設定項目も多く非常に使いやすいですが、細かいところは CSS で調整するのがコツです。ぜひお試しください。
