XO Slider プラグイン

XO Slider (旧名: XO Liteslider) プラグインは、スライダーを簡単に作成できるプラグインです。

機能

サムネイルナビゲーション、カルーセルおよびコンテンツに対応しています。
スライダースクリプトに Swiper を使用しています。
フロント側では jQuery を使用していません。
ブロックエディターに対応しています。
動画 (添付ファイル・YouTube) に対応しています。
テンプレートファイルを作成することで、Swiper の機能をフルに活用することができます。

インストール

WordPress 管理画面->[プラグイン]->[新規追加] メニューより、[プラグインを追加] ページを開きます。
検索ボックスに、”XO Slider” と入力し検索します。
XO Slider が見つかったら、[今すぐインストール] をクリックします。
インストールが完了したら”プラグインを有効化”をクリックします。

WordPress 公式ディレクトリ

XO Slider (旧名: XO Liteslider)

スクリーンショット

サンプルイメージ

スライダー管理画面

スライダーブロック

説明

プラグインを有効にすると、管理画面に [スライダー] メニューが追加されます。 [スライダー] メニューをクリックするとスライダー一覧ページが表示されます。このページで複数のスライダーを管理することができます。まずは、スライダーを追加します。追加するには、[新規作成] をクリックします。スライダー編集ページが表示されます。このページでスライダーを設定します。タイトルにスライダーの名前 (「トップページ用スライダー」等) を設定します。スライドボックスにスライドを設定していきます。スライドを追加するには、ヘッダーの [＋] をクリックします。スライドを削除するには、ヘッダーの [×] をクリックします。スライドの順番を入れ替えるにはヘッダーをドラック＆ドロップして移動させます。スライドの項目は下記のとおりです。

スライド項目

項目	説明
メディアを選択	ここをクリックして、メディアを選択します。対応しているメディアは、画像、動画および YouTube (URL からの挿入) です。
画像
タイトル属性	画像のタイトル属性です。空の場合は画像のタイトルが使用されます。
Alt タイトル (代替テキスト)	画像の Alt タイトル属性です。空の場合は画像の Alt タイトルが使用されます。
リンク(URL)	画像のリンクです。
新しいウィンドウで開く	画像のリンクを新しいウィンドウで開くかどうかです。
コンテンツ
コンテンツ（HTML）	スライドのコンテンツ (HTML)です。
オプション
タイトル	コンテンツに表示するタイトル (HTML) です。
サブタイトル	コンテンツに表示するサブタイトル (HTML) です。
ボタンのテキスト	コンテンツに表示するボタンです。
ボタンのリンク	コンテンツに表示するボタンのリンクです。
新しいウィンドウで開く	ボタンのリンクを新しいウィンドウで開くかどうかです。
動画
自動再生	自動再生するかどうかです。 Chrome や Safari で自動再生する場合は、ミュートする必要があります。
ループ	繰り返し再生するかどうかです。
ミュート (消音)	ミュート (消音) 状態で開始するかどうかです。
プレイバックコントロール	プライバックコントロールを表示するかどうかです。 ※ 添付ファイルの動画のみ有効です。
インラインで再生	インラインで再生するかどうかです。 ※ 添付ファイルの動画のみ有効です。
先読み	動画の読み込み方です。「なし」 (事前のファイル読み込み禁止)、「メタデータ」 (メタ情報だけを読み込む)、および「自動」 (動画ファイルを事前にダウンロードする) の3種類から選択します。 ※ 添付ファイルの動画のみ有効です。

パラメーターボックスでスライドのパラメーターを設定をします。パラメーターの項目は下記のとおりです。

パラメーター項目

項目	説明
基本
幅、高さ	スライド（画像）のサイズ（幅、高さ）です。省略可能です。実際の画像より小さく表示したい場合等に設定します。
効果	アニメーション効果です。 “Slide”、”Fade”、”Cube”、”Coverflow” および “Flip” の5種類から選択できます。
ナビゲーション	ナビゲーションを表示する場合はチェックします。
ページネーション	ページネーションを表示する場合はチェックします。
コンテンツ	コンテンツを表示する場合はチェックします。
表示順	スライドの順番を指定します。「昇順」、「降順」および「ランダム」の3種類から選択します。
ループ	スライドのループの有効、無効を指定します。テンプレート (Parallax など) によっては、常に無効になる場合があります。
効果速度	アニメーション効果の速度です。ミリ秒単位で指定します。空の場合は、デフォルト値 (300)となります。
自動高さ調整	画像の高さに合わせて、スライドの高さを調整するかどうかを指定します。
グループ単位	一度に切り替わるスライド数を指定します。
表示単位	表示領域あたりのスライド数を指定します。少数値を指定して、中央配置パラメータをチェックすると、左右に見切れたスライドが表示されます。
間のスペース	スライド間の幅 (または高さ) を指定します。
中央配置	スライドを中央配置する場合はチェックします。表示単位が1以上の場合に有効です。 ※ バージョン3.3.0より
自動再生
自動再生	スライドを自動再生するかどうかを指定します。
遅延	スライド間の遅延時間を指定します。ミリ秒単位で指定します。
最後で停止	最後のスライドで再生を停止するかどうかを指定します。
操作で停止	スワイプやページ送りなどの操作後に、自動再生を停止するかどうかを指定します。
サムネイル
表示単位	表示領域あたりのサムネイル数を指定します。
間のスペース	サムネイル間の幅 (または高さ) を指定します。