スライダーブロックの設定は、初期状態では PC もスマホも共通です。サイドバーの「スマホ(767px 以下)」パネルで「スマホでは別の設定を使う」をオンにすると、767px 以下の画面だけ、同時に表示する枚数・自動再生・矢印・ドット(メディアスライダーではサムネイル、ロゴスライダーでは 1 枚あたりの幅と流れるスピード)を別に設定できます。shitate pro blocks 1.8.3 で追加されました。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、次のスライダーは画像ではなく本物のブロックです。PC では 2.5 枚、スマホ(767px 以下)では 1.5 枚で表示する設定にしてあります。ブラウザーの幅を変えると枚数が切り替わります。
設定方法
- スライダーブロックを選択し、サイドバーの「スマホ(767px 以下)」パネルを開きます
- 「スマホでは別の設定を使う」をオンにします
- 下に出てくる項目を、スマホ向けに設定します。PC 向けの設定は上の「スライダー」パネルのままです


設定できる項目
ブロックスライダー/メディアスライダー
- 同時に表示する枚数 — 1〜4。0.1 刻みで、1.5 のような小数も指定できます(後述)。切り替え効果がフェードのときは常に 1 枚なので、この項目は出ません。
- 自動再生 — スマホでだけ自動再生を止める(または動かす)ことができます。間隔と一時停止の挙動は PC と共通です。
- 矢印を表示/ドット(ページネーション)を表示 — 狭い画面では矢印を消してスワイプだけにする、といった使い方ができます。
- サムネイルを表示 — メディアスライダーで、PC 側の「サムネイルを表示」がオンのときだけ出ます。オフにするとスマホではサムネイル帯を隠します。
ループ、切り替え効果(スライド/フェード)、切り替えの速さ、自動再生の間隔、矢印の位置、ドットの種類、中央寄せ、ドラッグ/スワイプの許可は PC と共通です。
ロゴスライダー
- 1 枚あたりの幅 — PC 側で幅を指定しているときに効きます。空欄なら PC と同じ幅です。
- 流れるスピード — 0.2〜3。スマホでは少しゆっくりにする、といった調整に。
PC とスマホでの表示
上の「実際の表示」と同じ設定(PC 2.5 枚・スマホ 1.5 枚)を、PC とスマホの幅で表示したところです。


オフのときの自動調整
「スマホでは別の設定を使う」がオフのときは PC の設定がすべての画面に効きますが、同時に表示する枚数だけは画面幅に応じて自動で減ります。
| 画面幅 | 同時に表示する枚数 |
|---|---|
| 1024px 以上 | 設定どおり |
| 768〜1023px | 最大 2 枚(設定が 2 未満ならそのまま) |
| 767px 以下 | 1 枚 |
オンにすると、この自動調整は行われません。767px より広い画面は PC の設定、767px 以下はスマホの設定になります。768〜1023px のタブレットは PC 側の設定になる点に注意してください。
小数で指定する

枚数は 1.5 や 2.5 のように小数で指定できます。小数にすると次のスライドの一部が端に見えるので、「横にまだ続きがある」ことが伝わりやすくなります。PC・スマホのどちらでも使えます。
- スライド 1 枚の幅は、トラックの幅を枚数で割った値です(スライド同士の間隔も含めて計算します)。整数のときと同じ考え方で、1.5 なら「1 枚+半分」になります。
- 移動は 1 枚ずつです。最後は末尾のスライドが右端に揃う位置で止まります。
- オフのときの自動調整も小数のまま行われます。たとえば 2.5 なら、768〜1023px では 2 枚、767px 以下では 1 枚になります。
- フェードでは使えません(常に 1 枚です)。
- 小数での指定は 1.12.0 の次のバージョンで追加されます。それより前のバージョンでは整数のみです。
注意点
- 境界は 767px で、プラグインの CSS と同じです。判定はブラウザーの幅で行うので、タブレットを横向きにしたときなどは PC 側の設定になることがあります。
- 自動再生のオン・オフだけはページを読み込んだ時点で決まります。読み込んだあとにブラウザーの幅を変えても切り替わりません(枚数・矢印・ドットはその場で切り替わります)。
- スマホ用の設定は、オンにしたときだけ
data-sb-sp属性として保存されます。オフのままのブロックのマークアップは変わらないので、既存のスライダーはそのまま有効です。 - エディター内ではスライダーは動きません。スマホでの見え方はフロントで、ブラウザーの幅を狭めるか実機で確認してください。
