【WordPress】様々な機能を備えたレスポンシブタッチスライダーMaster Slider

WordPress

January 12, 2018

Master Slider – Responsive Touch Slider
Master Sliderは、すべての主要なデバイスで動作するSEOフレンドリーのイメージやビデオを使用でき、トランジションも備えているスライダープラグイン。スワイプジェスチャーでタッチナビゲーションもサポート、自動再生、垂直方向と水平方向のナビゲーション、8つのスターターサンプルを使用可能、タイマーバーおよびサークルタイマーのUIコントロールなども備えられています。

Master Sliderプラグイン導入

ダッシュボード >> プラグイン >> 新規追加 >> Master Sliderを検索
有効化にするとMaster Sliderが追加されます。

互換性のあるブラウザ

  1. IE8+
  2. Firefox
  3. Safari
  4. Opera
  5. Chrome
  6. iOS browser
  7. Android browser

General Settings

Master Slider – Responsive Touch Slider

  1. Hide info table 情報テーブルを非表示にする
  2. Enable cache? キャッシュを有効にしますか?
  3. Cache period time キャッシュ期間時間

Advanced Setting

Master Slider – Responsive Touch Slider

  1. Load assets on all pages? すべてのページにアセットを読み込みますか?

Master Slider – Responsive Touch Slider
Create New Sliderをクリックし、スライダーのタイプを選択します。今回はSlider with Vertical Thumbnailsを選択してみました。

Slides

Master Slider – Responsive Touch Slider
Slides
Add Slideをクリックし、メディアから画像を選択します。

Background

Background 背景
Fillmode フィルモデル
Thumbnail サムネイル

Slide

  1. Slide duration スライドの持続時間

Master Slider – Responsive Touch Slider
Video and Link

URL リンクURL
Link id リンクID
Link rel リンクrel
Link class リンクclass
Link title リンクタイトル
Video embed src 動画のURL
Autoplay video 動画の自動再生

YouTube / Viemoを埋め込む際はFinding YouTube/Viemo Embed URLを参照下さい。
Master Slider – Responsive Touch Slider
Slide Info
特定のスライドに達するとスライダの横に情報を表示されるか、タブコントロールのタブとして表示されます。

Master Slider – Responsive Touch Slider
Misc
スライド要素のカスタムクラス名とID

  1. Class name クラス名
  2. CSS ID クラスID

背景色と背景色の代替テキスト

  1. Background color 背景色
  2. Alt text 代替テキスト
  3. Background image title 背景画像タイトル

スライドカラーとパターンオーバーレイ

  1. Color overlay カラーオーバーレイ
  2. Pattern overlay パターンオーバーレイ

General Settings

Master Slider – Responsive Touch Slider
General Settings

  1. Slider name スライダー名
  2. Slider width スライダー幅
  3. Slider height スライダーの高さ
  4. Automatically crop and resize slider images based on the size above. 上記のサイズに基づいてスライダー画像を自動的にトリミングおよびサイズ変更します。
  1. Auto-height slider 高さ自動スライダー
  2. Minimum height amount 最低高さ
  3. Slider wrapper width スライダーラッパーの幅

Slider Transition

Transition 移行
Transition speed 移行速度
Direction 方向
Slide spacing スライド間隔

Navigation

  1. Autoplay (Slideshow) 自動再生(スライドショー)
  2. Loop navigation ループナビゲーション
  3. Pause at the final slide 最後のスライドで一時停止する
  4. Pause on hover ホバーで一時停止
  5. Random order 順不同
  6. Start with slide スライドから始める
  1. Touch swipe navigation スワイプナビゲーションをタッチする
  2. Mouse swipe navigation マウススワイプナビゲーション
  3. Use grab mouse cursor グラブマウスカーソルを使用
  4. Mouse wheel navigation マウスホイールのナビゲーション
  5. Start slider when appears in browser window. ブラウザウィンドウにスライダを表示します。

Appearance

  1. Skin スライダースキン
  2. Align center slider controls 中央スライダコントロールの整列
  1. Background image 背景画像
  2. Background color 背景色
  1. Class name クラス名
  2. Slider custom styles スライダカスタムスタイル

Slider Controls

Master Slider – Responsive Touch Slider

  1. Add new control 新しいコントロールを追加する
  2. Used controls 使用するコントロール

Slider Callbacks

Master Slider – Responsive Touch Slider

  1. Add new callback 新しいコールバックを追加する

エディタ

Master Slider – Responsive Touch Slider
エディタをビジュアルにするとMaster Sliderが追加されています。

Master Slider – Responsive Touch Slider
追加したいスライダーを選択するとショートコードが挿入されます。

PHP

PHP functionでテンプレート内に挿入することも可能

<?php masterslider(3); ?>

Master Slider – Responsive Touch Slider

ウィジェット

Master Slider – Responsive Touch Slider
表示させたい位置に移動させます。

Master Slider – Responsive Touch Slider

Latest Posts

Related Posts