Slider Revolutionの設定詳細

ギズモードでバカな記事が出ていたので追記。
[blogcard url=https://www.gizmodo.jp/2016/04/wordpress_1.html]
コレね。Slider RevolutionとRevolution Sliderは同じプラグインです。バージョン3系の時にハックにあって4系からSlider Revolutionとなりました。んで最新は5系。
つまり、古い環境をそのまま使用しているからおこった事をプラグインのせいとしている点がバカである。

Slider Revolutionの設定をより詳しく書いていきます。

スライダーの設定に関する注意
スライダータイプではなく、Slider Revolutionの設定されている内容すべてが、あなたのスライダーに適用されます。例えば、カルーセルの設定は、あなたの「スライダタイプ」が「カルーセル」に設定されている場合にのみ表示され、ナビゲーションの設定は、「ヒーローシーン」スライダーに表示されません。

はじめに – Slider Revolution設定

スライダーの設定を調整するとき、小さなプレビューボックスには、各設定を説明するために表示されます。それはあなたの特定の設定を簡単にパララックスの設定をするとき等に「外観」、「ナビゲーション」、などを設定する必要があります。

「シャドウタイプ1は「ホバープレビューボックスに示されています。

一般設定

1スライドショー

ホバー上のスライドを停止

ユーザーがスライダー上にマウスを置いたときに、スライダーの進行を停止します。

後スライダーを停止します..

ループの量：
すべてのスライドは時間の設定量をループした後、スライダーを停止します。
スライド時：
特定のスライドにあるスライダを停止します。

シャッフル/ランダムモード

使用はスライダー上にマウスを置いたときに、スライダーの進行を停止します。

ループシングルスライド

使用はスライダー上にマウスを置いたときに、スライダーの進行を停止します。

ビューポートの外にスライダーを停止

ページをスクロールしないとスライダが見えなくなっているときに、スライダーを停止します。

ビューポートの出力：
- 待ち：
  その（スライダー、さらにページダウンのために有用な）ビューにスクロールしたときにのみ、スライダーを開始します。
- 一時停止：
  そのビューの外にスクロールするとき、スライダーを一時停止します。
ビューポートのうちエリア：
スライダーを開始または一時停止する前に、ビューポートの外側/内側にあることが必要であるスライダーの割合。

デフォルト

デフォルト個々のスライドの設定を行います。

例えば、あなたが常にあなたの個々のスライドは、「スライドトップへ」の移行とオフを開始したいとしましょう。「トランジション」の値を調整するので、すべての新しいスライドは、デフォルトで「スライドトップへ」の移行を持っている必要があり、それを設定します。

あなたは既に個々のスライドが作成している場合は、あなたが「トランジション」の値を変更し、そのチェックボックスを選択し、ボタンをクリックし、「すべてのスライド上で選択した設定を上書き」、およびすべての既存のスライドのための主要な移行は、に変更されますすることができます新しいデフォルト値。

プログレスバー

次のスライドまでの時間を示すタイマー線が示されています。

アクティブな場合は、プログレスバーの位置（スライダーの上部または下部）、ピクセル単位での高さ、またその色と透明度レベルを選択します。

最初のスライド

代替第一スライド

通常、スライダーは常にスライド＃1で始まります。あなたが別のスライドで開始するためにあなたのスライダーのようにしたい場合は、ここではスライドの番号を入力します。

アクティブ最初の遷移

あなたのスライダーが最初に起動されたときに時々、このような非常に先頭に単純なフェードなどの異なる遷移を持つことがよりエレガントです。あなたは非常に最初のスライドのための特別な、初期の移行を指定したい場合は、このオプションを使用します。

設定すると、特別な移行は、一度だけ、非常に最初のスライド上で実行されます。そして、スライダーループと、元のスライドは、その個々のスライドのトランジションの設定に戻ってデフォルト設定されます。

その他

フォーカス上の次のスライド

（など、JavaScriptが実行を停止）ウィンドウ/タブを切り替えると、ブラウザの動作が異なります。しかし、「次のスライドフォーカスオン」オプションは、多くの場合、正しいスライダーの問題タブやウィンドウの切り替えに関連します。

レイアウト＆ビジュアル

外観

シャドウタイプ

影が、スライダーの下に表示されます。6さまざまなスタイルの間で選択するか、または「いいえ影」（デフォルトオプション）を選択します。示すように、と影の種類をプレビュープライマー上のセクション。

点線のオーバーレイサイズ

点線のオーバーレイは、スライダを「メッシュ」型の外観（4スタイル利用可能）を与えて、スライドの上に配置される透明な格子状のグラフィックスです。示すように、オプションをプレビューするプライマー上のセクション。

スライダーの背景

スライダの主な背景。あなたの個々のスライドは、独自の背景画像を持っている場合、通常、スライダの主な背景にのみ表示になるときにスライダーが最初にロードし、最初のスライドが表示される前に。しかし、スライダー自身のためにここに背景を設定すると、「透明」のスライド（no背景イメージとスライド）を使用しているときに特に有用です。

ソリッドカラーを選択するか、背景として画像を設定します。あなたのスライダーの境界線を与えるためにいくつかのパディングを適用します。そして、のような特定の背景画像オプション設定の背景フィット、背景を繰り返して、背景の位置。

スピナー

スライダーのアニメーションプリローダーのグラフィック。

スライダーが最初にロードし、また、追加のスライドの場合ときスピナーが表示されますLazyLoadが使用されています。6異なるスピナースタイルの間で選択、または全くスピナーのための「オフ」を選択します。

モバイル

モバイル上のスライダーを無効にします

モバイルデバイス上で全体のスライダーを無効にするかを選択します。無効の場合は、シンプルなスライダーを置き換えることができ、フォールバックイメージ。

モバイルでケンバーンを無効にします

ケン・バーンズの効果は、デスクトップコンピュータに偉大に見える高度なアニメーションですが、モバイルデバイス用に、よりシンプルなスライダーを提供することは、時には、より良いユーザー経験をすることができます。あなたの好みに応じて、この設定を使用してモバイル用のオンとオフKenBurns効果を切り替えます。

要素の下に幅を隠します

画面サイズが特定のピクセル幅（すなわち640ピクセルなど）を下回っているとき全体スライダー、個々のレイヤー、またはすべてのレイヤーを非表示にするかを選択します。

レイヤーを非表示にすると、デスクトップ上の素敵なコンテンツが表示され、多くの時のために便利ですが、モバイル上のすべてに適合するのに十分なディスプレイ（スクリーンスペース）が実際にはありません。

「事前定義された」レイヤーがある場合は、あなたが「非表示」にするように設計された特定のレイヤーは、ここで設定したピクセル幅の以下で表示にされます。

つまり、効果的に表示した場合は、速度を優先しこうしたスライダーを非表示にする事でユーザーにメリットを与えるユーザビリティになります。

ポジション

ページ上の位置

スライダーのデフォルトのアラインメント。オプションは、「中央」または「右」「左」されています。

マージントップ、余白ボトム

ページ上の他のコンテンツに関連して、スライダーの上または下にいくつかのスペースを追加します。正と負の両方の番号がサポートされています。

ポジション

水平整列/横オフセット

水平整列：左、右、またはスライダーの中央にナビゲーションの位置を合わせます。

水平オフセット：（正と負の数がサポートされている）、その水平方向の配置に関連して、ナビゲーションに右/左マージンを適用します。

垂直整列/垂直オフセット

垂直整列：スライダーの上部、下部または中間にナビゲーションの位置を合わせます。

縦オフセット：その垂直配向に関連してナビゲーションへ、トップ/ボトムマージンを適用（正と負の数は、サポートされています）。

アローズ

アローズ/アロースタイルを有効にします

ナビゲーション矢印を有効/無効にするために選択し、有効にした場合、15種類の事前に構築されたスタイルのいずれかを選択します。

可視性、左/右矢印の位置

共通のナビゲーションオプションをを参照してください。

数値ブレット

ブレット/箇条書きスタイルを有効にします

ナビゲーション矢印を有効/無効にするために選択し、有効にした場合、15種類の事前に構築されたスタイルのいずれかを選択します。

スペース/ディレクション

ピクセル単位でブレットの間の間隔を設定し、弾丸が水平に表示するかを選択します（ブレットが並べて表示）。

垂直方向（部れっっっとが互いの上に配置されました）。

可視性、位置

上記の共通のナビゲーションオプションを参照してください。

タブ/サムネイル

クイック注：
タブとサムネイルはまったく同じオプションを共有し、簡潔にするため、ここでこのセクションで結合されます。

ラッパーコンテナー

ラッパーパディング：親指/タブコンテナのスライダの端と端の間のスペースです。

スパンラッパー：ON：親指/タブが常にスライダーのフルサイズに張架されます。

OFF：親指/タブがスライダのまで延伸されるレイヤーグリッド。

ラッパーの色/不透明度

タブ/親指部分の色と不透明度を調整します。「スペース」または「ラッパーパディング」のいずれかが存在する場合にのみ表示されます。

スタイル、可視量、スペース＆ディレクション

スタイル：7異なる事前に構築されたスタイルの間で選択します。

可視量：目に見えて表示されます親指またはタブの量。あなたは7のスライドを持っていますが、唯一の3サムネイルを表示させたい場合たとえば、技術的に親指ストリップはまだ7項目が含まれますが、唯一の3親指は、任意の時点で表示されます、そして追加の親指はマウスのみに表示されます-移動。

スペース/ディレクション

場合、彼らは（互いの上に配置された）水平（横並び）または垂直に表示されるべきピクセルのタブ/親指の間の間隔を設定し、選択します。

幅、高さ、ミン。幅

タブ/親指の幅と高さを設定します。幅は、「最大幅」として作用し、かつ「高さ」は比例してサイズが変更されます。

たとえば、のは、スライダー自体はモバイル用の50％ダウンサイズを変更したとしましょう。親指の幅/高さが100×50に設定された場合は、親指サイズも50％ダウンサイズを変更することになり、新たな親指の幅/高さは50×25になります。

「最小幅」の値が有用であるが、これは。たとえば、のは、親指の幅/高さが100×50に設定したとしましょう。「最小幅」はまた、「100pxに」に設定されている場合、サムネイルがダウンサイズを変更することはありません。

可視性、位置

上記の共通のナビゲーションオプションを参照してください。

タッチ

タッチ対応

有効/モバイルタッチナビゲーションを無効にするかを選択します。有効にした場合、指でスライダを左または右にスワイプすると、前後にスライドを変更します。

ブロック垂直にドラッグします

「タッチ」が有効になっているときにページが垂直方向にスクロールすることを可能にします。「ON」が適用された場合例えば、垂直方向の「スワイプ」スライダはまた、ページ自体をスクロールします。「OFF」に設定すると、垂直方向にスライダーをスワイプするときしかし、ページ自体がスクロールされません。

スワイプしきい値、最小、サムネイル

しきい値

スワイプアクション感度。数値が小さいだけ短い「スワイプ」が変更にスライドするために必要であることを意味します。数値が大きいほど、より精巧な「スワイプ」は変更するスライドのための場所を取る必要があるだろうことを意味します。

最小。タップ

「スワイプ」アクションのために必要な指の数が登録されます。それはほとんどのユーザーが使っているものだが、あなたのサイトに応じてユーザーが「スワイプ」に2本の指を使用することを要求することができるように、「1」の指など、通常は最高です

スワイプの方向

水平：

伝統的な左から右へのタッチスワイプナビゲーション。

垂直：

あなたの時のための有用なスライドアニメーションを「縦（次/前）のスライド」に設定されています。この場合、スライドを変更します上下にスワイプします。

その他

キーボードナビゲーション

スライド間を移動するには、矢印キーを有効にする場合に選択します。

方向キー

垂直：上下キーは、スライダの「次/前の「コントロールとして機能します。

水平：左と右のキーは、スライダの「次/前の「コントロールとして機能します。

マウスのスクロール方向

スライドの間で変更するには、マウスホイールの動きをキャプチャします。

パララックス

パララックスに基づいてコンテンツをスライドする動きを適用するために使用することができるマウスまたはスクロール。

モバイルでパララックスの有効化/無効化

スライダーの視差効果を可能にするために選択し、有効にした場合、唯一のモバイル用の効果を無効にする]を選択します。（パララックスがマウスの動きやページスクロールに基づいているため、パララックスは通常、デスクトップコンピューター上で最高のパフォーマンスを発揮します）

マウスの感性

イベント：「マウス移動」を選択し、「スクロール位置は「 “＆スクロールの移動」（ページがスクロール）または（最初の2つの合成）。

パララックスマウスホバー効果：「マウスポイントを入力してください」 – 視差は、マウスが第1のスライダに入った場所に基づいています。

「スライダーセンター」 – 視差は常にスライダー（通常は最良のオプション）の非常に中心点に基づいています。

アニメーションの速度：コンテンツの移動のための移行期間。このような滑らかな動きのために、このような「2000」などの高速移動、およびより多数のための「750」のように低い数値を使用してください。

視差レベル

各個々の層は、「視差量」を割り当てることができます。そして、あなたは10の異なる「レベル」まで定義することができます。

別のスライドレイヤーに異なるレベルを適用することは、他の視差の層に関連したコンテンツの「深さ」を与えるものです。一部のコンテンツレイヤーは他のものよりも少ない動きを持っていることに気づくでしょう。異なる層は、異なる「視差レベルが「割り当てられていからです。

あなたの視差量の値を選択するときに、小さい数が少ない運動を意味するであろう、より高い数は動きの大きい量を可能にするであろう。

パフォーマンスとSEOの最適化

このセクションでは、スライダーの初期ロードをスピードアップするために、複数の遅延読み込みのオプションから選択して、また、あなたのすべての画像が合理的にWeb用にサイズ設定されていることを確認することに役立ちますあなたのスライダーの全体的なファイルサイズのフットプリントを、評価することができます。

レイジーロード

すべて：スライドを切り替えるときに、スライドコンテンツ間の遅延を確保していない、最初にページをロードした後、スライダ内のすべての画像をロードします。

このようなサムネイル、弾丸やタブなどの高度なナビゲーションとスライダーのためのベスト。

スマート：ページが最初にロードし、また、隣接するスライドから画像をプリロード非常に最初のスライドからの画像の読み込み後。たとえば、ときにスライダーが最初にロードは、第二スライドは、スライダ変化を見越してプリロードされます。そして、第二スライドが表示されたら、次に、第三のスライドは、その後、プリロードされるだろう、というように。

唯一の進行は、常に「次へ」または「前」である基本的なナビゲーションを、含まれているスライダーのための偉大なオプションです。

シングル：常に「オンデマンド」のスライドコンテンツをロードします。意味は、最初のスライドが最初にロードされ、それがスライダに表示されるべき彼らの番だ時以降のスライドにのみロードされます。

遅延読み込みいいえ：ページが最初にロードされた時にすべてのコンテンツがロードされます。最小内容とスライダーのため、多くの場合、[OK]をクリックします。スライドおよび/またはコンテンツのたくさんのスライダーにはお勧めしません。

SEOの最適化

最適なSEOのための「いいえスクリプト」タグで画像をロードするかを選択します。

全体的なスライダーパフォーマンス

右のスクリーンショットに示す緑のバーは、あなたのLazyLoadの選択に基づいて一般的な評価、そしてあなたはスライダーで使用している平均的な画像サイズです。

などDSL、ケーブル（T1）、などの一般的なインターネットの速度との間の推定負荷速度を表示するにはLazyLoadオプションを切り替えます

全統計を表示します：

画像性能の詳細なリストは、Googleフォントなどを見ます

すべての問題を表示：

あなたのスライダーを遅くすることができたアイテムの表示。

右の例のスクリーンショットでは、最初のスライドのために使用される背景画像は、ウェブのためであるべきであるよりもはるかに大きい1.7メガバイトです。

（使用して、Photoshopでこのイメージのファイルサイズ削減のWeb用に保存をより合理的なサイズのような300キロバイト以下にするオプション）が劇的にスライダーのパフォーマンスが向上します。

問題の取り扱い

フォールバック

古いモバイルデバイスやレガシーIEとの互換性のために、あなたはスライダーの機能を簡素化したり、代替画像に置き換えることができます。

iOS4 / IE8に簡素化

アニメーションは劇的にこれらの環境のパフォーマンスを向上させるであろう古いiOSとIEのためのシンプルな「フェード」に設定されます。

代替画像を使用してください

モバイル機器、IE8、またはその両方のためのスライダーの代わりに代替画像を使用するかを選択します。代替画像を使用する場合は、「代替画像」フィールドに画像の絶対URLを入力します。

トラブルシューティング

他のプラグインやテーマと共通の競合を解決するために、トラブルシューティングのオプションを使用します。

jQueryの競合モード

使用してjQueryのnoConflictは WordPressのベストプラクティスと考えられ、スライダー革命は、デフォルトでこれを使用しています。しかし、時には別のテーマやプラグインは、多くの場合、競合が発生する可能性があります。このベストプラクティスを、使用して構築することはできません。これらのケースでは、「OFF」には、このオプションを設定すると、時々、この問題を解決することができます。

JSは、Bodyに含ま入れている

多くの場合、「wp_head（）」を適切に呼び出すことができますが「Minfy」プラグインや、特定のテーマとの競合を解決します。

出力フィルタの保護

時にはテーマは（あなたがお使いのブラウザで、スライダーのHTMLソースを表示する場合、あなたが頻繁に見つける “<P>”スライダーのHTMLマークアップを壊すことになる、（WPのベストプラクティスに対する）ページのコンテンツの上に特殊なフィルターを実行するタグが全体に注入しますスライダーのマークアップ）。

「出力フィルタの保護」オプションは、この紛争に対処しようとします。スライダが他のページコンテンツの下に表示されることを意図しているときに「エコー出力によって「多くの場合、本来はそもそも他のページのコンテンツの上に配置されているスライダーの罰金であるページ、上の他のすべてのコンテンツの上部のスライダーを配置しますが、「出力を圧縮して」パフォーマンスを最高にする事ができます。

インポート/エクスポート/置換

参照

お使いのコンピュータからスライダーインポートzipファイルを選択します。

カスタムアニメーション/静的スタイル

上書き：インポートされたスライダーからのもので、以前のスタイルやアニメーションを上書きします。

追加：以前のスタイルとカスタムアニメーション（通常は最良の選択肢）を保持します。

エクスポート

現在のスライダーをエクスポートし、（別のウェブサイトに「インポート」すなわち）後の使用のためのあなたのコンピュータに保存することができ、「ZIP」ファイルを作成します。

URLを置換

画像のURLのあなたのスライダーでは、絶対URLとして格納されているので、あなたは（ライブサイトにlocalhostなど）あるドメインから別のドメインにサイトを移動している場合、このツールは、新しいサイトのスライダーの画像のURLを更新するために使用することができますドメイン名。

交換してください：古いサイトのドメインからのベースURL。

置換：新しいサイトのドメインのベースURL。

API

APIのメソッドとイベントとスライダーの機能を拡張します。

APIのメソッドとイベントとスライダーの機能を拡張します。利用可能なメソッドおよびイベントのすべてが、スライダーの設定のこのセクションに記載されている、とスライダーのにこのセクションから直接コピーして貼り付けることができますカスタムJavaScriptセクション。

各スライダはスライダのIDに基づいて独自のAPI変数を持つことになります。右のスクリーンショットでは、API変数は「revapi5」ですが、これはあなたの特定のスライダーによって異なります。

各メソッドまたはイベントの簡単な説明については、各コードサンプルの上にマウスを置きます。

次は最後のスライドに2番目が表示されているときに我々はスライダーを一時停止しますスライダのAPIを使用しての簡単なサンプルです。

// listen for when the slider initially loads
revapi5.bind('revolution.slide.onloaded', function() {
 
    console.log('Slider Loaded');
 
    // get number of total slides in slider
    var totalSlides = revapi5.revmaxslide();
 
    // listen for when a new slide is shown
    revapi5.bind('revolution.slide.onchange', function(e, data) {
 
        // get current slide number
        var currentSlide = data.slideIndex;
 
        // pause slider at the second to last slide
        if(currentSlide === totalSlides - 1) {
 
            console.log('Slider Paused');
            revapi5.revpause();
 
        }
 
    });
 
});

他のAPIの例：

Googleのフォント

あなたのテーマはすでにあなたはスライダーのテキストに使用できるGoogleのフォントをロードして場合にはスライダーで好きな新しいGoogleフォントをロードすることができます。

開始するには、「新しいフォントの追加」ボタンをクリックします。

読み込んでいない場合

次に、訪問Googleのフォントのウェブサイトを、あなたが使用したいフォントを選択します。そして、「クイック使用」アイコンをクリックします。

URLからフォントスラグをコピーします。（“フォント= “一部の後、および単一引用符なし）

そして、スライダの「新しいフォントの追加」フィールドにGoogleのフォントスラグを貼り付けます。

カルーセルの設定

任意のスライダーは、超柔軟カルーセルとして表示することができます。例を参照するには、ちょうどあなたのスライダーのための「カルーセル」を選択するスライダタイプ。

「スライダタイプ」が「カルーセル」に設定されると、「カルーセル設定」「ナビゲーション」セクションの下に表示されます。

基本

インフィニティスクロール

OFF：カルーセルは「初め」と「終わり」を持つことになります。終わりに達すると、スライダがない自動的にループして、前のスライドを表示する唯一の方法は後方に移動することであろうという意味。

ON：無限カルーセルがループ。最後のスライドに達したとき、示される次のスライドは、あなたが延々と前方にクリックできるように、というように非常に最初のスライドのコピーである、とすることを意味します。

スライドの間のスペース

カルーセル形式では、通常のアイテムは、それらの間のスペースを持っている「ブロック」と示されています。この間隔はオプションですが、伝統的なカルーセルの外観を表示したい場合は、ここでいくつかの間隔を追加します。

ボーダー半径

追加丸みを帯びた角をここで、画素値を適用することによって、あなたのカルーセル項目に。または完全な円を達成するために、「50％」の境界線半径を追加します。

パディングトップ/パディングボトム

ページのコンテンツの残りの部分に関連した項目のためのいくつかの余分なスペースを作成し、カルーセル項目の上部と下部にいくつかのパディングを追加します。

最大表示項目

表示されます項目の数を表します。例えば、番号「3」を使用して、選択したスライドは、カルーセルの中心にされ、次に示す（左に（「次」のスライドを表す）、右、および1カルーセル項目に1カルーセル項目があります「前」のスライド）。

ストレッチ要素

選択されたカルーセル項目がスライダーの全体サイズをカバーするように延伸されます。

このオプションを使用すると、「以前」と「次」カルーセル項目にかかわらず、「最大表示項目」値の、表示されません。

トランスフォーメーション

すべての要素をフェード

以前のすべてと次のカルーセル項目が半透明になります。

フェードを変える-上記の特別な注意を参照してください。

OFF：フェージングは即時近隣のアイテムのために発生します。

ON：フェージングアイテムの可視サイクル全体で発生します。

回転

カルーセルは、前後に進行する（これはサイドから窓の開口部の影響を与える）の項目に「スキュー」を適用します。45から180までの範囲の度値は、通常、最高の仕事します。

ローテーションを変更すること-上記の特別な注意を参照してください。

OFF：回転は唯一の即時の近隣のアイテムのために発生します。

ON：回転は、アイテムの可視サイクル全体で発生します。

規模

ダウン割合に基づいて、前と次のスライドを拡大縮小。

最大スケールダウン

前回と次の項目を縮小する割合。例えば、50％は前と次のスライドは、選択カルーセル項目の半分のサイズにリサイズされるであろうことを意味するだろう。

様々なスケール-上記の特別な注意を参照してください。

OFF：スケーリングは即時近隣のアイテムのために発生します。

ON：スケーリングアイテムの可視サイクル全体で発生します。

カルーセルの配置

カルーセルの主な項目のための垂直および水平方向の配置を選択してください。主な選択項目が焦点になるとアライメントは、「右中央」に設定されている場合たとえば、それはスライダーのレイアウトの非常に右に整列されます。

と言うように、基本的な設定も細かくすればここまで多用に設定をする事ができます。

このスライダーをCMSとして使い、スライダーコンテンツをつくり、他のサイトで利用するなんて事もできてしまいます。

そうした利用の幅が広がるのが、このSlider Revolutionのメリットとなります。

Slider Revolutionの設定詳細