これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. 「スライダー」ブロック

Nishiki Pro バージョン 1.0.235 から「スライダー」ブロックが使えるようになりました(※ AMP ページは未対応)。

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

サンプル

エフェクト

スライド

フェード

フリップ

キューブ

カバーフロー

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

スライドの速さ変更

自動再生

逆再生もできます。

スライド間のスペース

スライドをループ

ナビゲーション(矢印)表示

色も変えられます。

ページネーション表示

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 テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など