Nishiki Pro バージョン 1.0.235 から「スライダー」ブロックが使えるようになりました。

複数のコンテンツをスクロールせずに、パラパラと切り替えることができます。

サンプル

エフェクト

スライド

フェード

フリップ

キューブ

カバーフロー

左右にちょっとだけ見せる

スライドの速さ変更

自動再生

逆再生もできます。

スライド間のスペース

スライドをループ

ナビゲーション（矢印）表示

色も変えられます。

ページネーション表示

4 パターンから選べます。色も変えられます。

通常

プログレスバー

ダイナミック

フラクション

スクロールバー表示

色も変えられます。

グループ化

1 画面中に表示するスライドの枚数を指定できます。

レスポンシブ対応

デスクトップ/タブレット/スマートフォン別で 1 画面中に表示するスライドの枚数を変更できます。

特徴

汎用性バッチリあります

画像だけではなく「カバー」ブロックなどと組み合わせて、テキストやボタンもスライドの中に入れられます。

jQuery 必要ありません

Nishiki Pro テーマはそもそもフロント側（ページ閲覧側）では jQuery を一切使用していません。jQuery を読み込まなくても動作します。

「スライダー」コンテンツ用の JavaScript ライブラリ「Swiper.js」を改めて導入する必要ありません

ウェブサイト制作を仕事としている方の中には「Swiper.js」を使ってスライダーコンテンツを作らなければいけない状況も出てくると想像します。

Nishiki Pro テーマ内に「Swiper.js」が同梱されていますので、改めて導入する必要はありません。

便利なブロックの操作

スライドの切り替え/入れ替え/複製が可能です。

注意：新しい「スライダー」ブロックと非推奨ブロックについて

バージョン 1.0.327 から「スライダー」ブロックが新しくなりました。

バージョン 1.0.326 以前の「スライダー」ブロックは「非推奨」です。非推奨のブロックは、新しいブロックと区別するため、下のようにブロック名に「非推奨」が付いています。

以下に非推奨のブロックについてよくある質問をまとめましたので、参考ください。

非推奨のブロックについてよくある質問

非推奨のブロックを扱うときの注意点

以下の現象は、新しい「スライダー」ブロックでは発生しません。できる限り、新しい「スライダー」ブロックを使用してください。

非推奨の「スライダー」ブロックを「複製」した場合は、必ずページ全体を保存したあと、リロード（更新）してから操作してください。

また、ブロックエディターのリスト表示からブロックを操作すると、コンテンツの連動に矛盾が生じる場合があります。「スライダー」ブロックのタブやコンテンツを「追加」「削除」したい場合は「スライダー」ブロック内での操作をお願いします。

スライドを作るときのポイント

複数の画像をスライドさせたい場合は、画像の横幅/高さ/比率を揃えるとキレイに配置できます。

このページで使っているサンプル画像は、全て横幅/高さ/比率を揃えています。

設定一覧（全体）

スライド設定

ナビゲーション設定

スクロールバー設定

グループ設定

レスポンシブ設定

※ 「681px 〜 768px」「769px 〜」それぞれ設定項目があります。

ページネーション設定

オートプレイ設定

設定一覧（個別）

スライド個別に設定できる項目です。

オートプレイ設定

スライド個別の設定を行う場合は、下の動画のように操作してください。

応用編：さらにカスタマイズしたい人はフックを使おう

「スライダー」ブロックを使わないページでは「Swiper.js」を読み込まないようにすることもできます。

詳しくは、以下のマニュアルを参考ください。

Nishiki Pro：フックを使ってスライダー用 JavaScript ライブラリ「Swiper.js」を特定の条件をつけて読み込みを OFF にする方法「Swiper.js」のスクリプトを「特定のページでは読み込みたくない！」という場合に使える方法です。support.animagate.com