Nishiki Pro バージョン 1.0.235 から「スライダー」ブロックが使えるようになりました。
複数のコンテンツをスクロールせずに、パラパラと切り替えることができます。
サンプル
エフェクト
スライド
フェード
フリップ
キューブ
カバーフロー
左右にちょっとだけ見せる
スライドの速さ変更
自動再生
逆再生もできます。
スライド間のスペース
スライドをループ
ナビゲーション(矢印)表示
色も変えられます。
ページネーション表示
4 パターンから選べます。色も変えられます。
通常
プログレスバー
ダイナミック
フラクション
スクロールバー表示
色も変えられます。
グループ化
1 画面中に表示するスライドの枚数を指定できます。
レスポンシブ対応
デスクトップ/タブレット/スマートフォン別で 1 画面中に表示するスライドの枚数を変更できます。
特徴
汎用性バッチリあります
画像だけではなく「カバー」ブロックなどと組み合わせて、テキストやボタンもスライドの中に入れられます。
jQuery 必要ありません
Nishiki Pro テーマはそもそもフロント側(ページ閲覧側)では jQuery を一切使用していません。jQuery を読み込まなくても動作します。
「スライダー」コンテンツ用の JavaScript ライブラリ「Swiper.js」を改めて導入する必要ありません
ウェブサイト制作を仕事としている方の中には「Swiper.js」を使ってスライダーコンテンツを作らなければいけない状況も出てくると想像します。
Nishiki Pro テーマ内に「Swiper.js」が同梱されていますので、改めて導入する必要はありません。
管理画面も工夫しています
スライドをクリックで切り替えられます。ドラッグ&ドロップでスライドの入れ替えもできます。
省スペース&便利!
スライドを作るときのポイント
複数の画像をスライドさせたい場合は、画像の横幅/高さ/比率を揃えるとキレイに配置できます。
このページで使っているサンプル画像は、全て横幅/高さ/比率を揃えています。
設定一覧(全体)
スライド設定
項目 | デフォルト値 |
---|---|
方向(現在「横」のみサポート) | 横 |
エフェクトの種類 | スライド |
速さ(秒) | 0.3 |
上下の間隔 | なし |
スライド間のスペース | 0 |
1 画面に表示するスライドの枚数 | なし |
※ スライドを中心に配置 | 無効 ※ 以下の設定をしている場合、項目が表示されません(=設定できません)。 ・1 画面に表示するスライドの枚数が 1 枚以下 |
※ スライドをループ | 無効 ※ 以下のいずれかを設定している場合、項目が表示されません(=設定できません)。 ・スクロールバーを「表示」 ・ページネーションのタイプが「プログレスバー」 ・エフェクトの種類が「フリップ」 |
ナビゲーション設定
項目 | デフォルト値 |
---|---|
ナビゲーション(矢印)を表示 | 無効 |
色設定 | なし |
スクロールバー設定
項目 | デフォルト値 |
---|---|
スクロールバーを表示 | 無効 |
色設定 | なし |
グループ設定
項目 | デフォルト値 |
---|---|
グループ化するスライドの枚数 | なし ※ 以下の設定をしている場合、項目が表示されません(=設定できません)。 ・エフェクトの種類が「フェード」「フリップ」「キューブ」のいずれか |
レスポンシブ設定
※ 「681px 〜 768px」「769px 〜」それぞれ設定項目があります。
項目 | デフォルト値 |
---|---|
レスポンシブを有効にする | 無効 |
※ 1 画面に表示するスライドの枚数 | なし |
※ グループ化するスライドの枚数 | なし |
※ スライドの間隔 | なし |
ページネーション設定
項目 | デフォルト値 |
---|---|
ページネーションを表示する | 無効 |
タイプ | 通常 |
色設定 | なし |
オートプレイ設定
項目 | デフォルト値 |
---|---|
オートプレイを有効にする | 無効 |
逆から再生 | 無効 |
手動でスライドさせた場合、自動再生を止める | 有効 |
遅れ(秒) | 3 |
設定一覧(個別)
スライド個別に設定できる項目です。
オートプレイ設定
項目 | デフォルト値 |
---|---|
遅れ(秒) | なし |
スライド個別の設定を行う場合は、下の動画のように操作してください。
応用編:さらにカスタマイズしたい人はフックを使おう
「スライダー」ブロックを使わないページでは「Swiper.js」を読み込まないようにすることもできます。
詳しくは、以下のマニュアルを参考ください。
ブロックを扱うときの注意点
「複製」したブロックは、必ずページを保存し、リロード(更新)してから操作してください。
リスト表示からブロックを操作すると、コンテンツに矛盾が生じる場合があります。「スライダー」ブロックのコンテンツを「追加」「削除」したい場合は「スライダー」ブロック内での操作をお願いします。
WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。
ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。
ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。
最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀
- リリース情報
- 新機能の紹介
- 便利な使い方
- 開発中の機能紹介
- 導入事例
- あるある日常ネタ
など