web-dev-qa-db-ja.com

回転スライダーはモバイルで背景画像を変更します

デスクトップでブラウジングするときに回転スライダーで完璧に動作するサイトがあります。ただし、モバイルから閲覧すると、スライダーの画像が正しく表示されないか、途切れます。モバイルブラウザがサイトにアクセスしたときにスライダー内の画像を切り替える方法はありますか、それともモバイルで何ができますか？ cssで切り替えてみましたが、うまくいきませんでした。他に何ができるかわからない。どんな助けでも大歓迎です。

wordpressrevolution-slider
6
Brad Hazelnut

当初、私はあなたができるとは思いませんでした。しかし、それはあなたができることが判明しました！ 2つのスライダーを作成してから、どちらか一方を巧みに非表示にするだけです。

画像のサイズだけの場合は、各スライダーのサイズにカスタムサイズを指定できます。これは、モバイルで表示するときにスライドのテキストを読み取れないことに対応するために行いました。モバイル版の高さを伸ばすことで、画像のテキストを読むことができるようになり、問題が解決しました。

モバイルで表示するときにスライダーを無効にすることもできます このように

6
BryanOfEarth

tempalteがビジュアルを使用している場合composer：

ファイル内の2つの関数に配列変数を追加します（plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php）：

addShortcodeSettings＆mapShortcode：

    array(
    'type' => 'dropdown',
    'heading' => __( 'Revolution Slider (Mobile)', 'js_composer' ),
    'param_name' => 'aliasmob',
    'admin_label' => true,
    'value' => $revsliders,
    'save_always' => true,
    'description' => __( 'Select your Revolution Slider Mobile-View.', 'js_composer' ),
)

これで、backend-editorで2つの異なるスライダーを設定できます。

少なくとも「Jskillzz」の回答からファイル（plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php）にモバイル検出を配置します。

からの変更：

$output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );

宛先：

if ( wp_is_mobile() ) :
$output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $aliasmob . ']' ) );
else :
$output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );
endif;

パスタ！

編集：モバイル設定のないスライドでは奇妙なエラーが発生するため、次のように、別のモバイルスライドをデフォルトでfalseに設定するためのオプション（チェックボックス）をもう1つ追加します。

（plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php）の2つの関数にさらに1つの変数を追加します。

        array(
            'type' => 'checkbox',
            'heading' => __( 'Use a different mobile Slider?', 'js_composer' ),
            'param_name' => 'mobileslide',
            'admin_label' => true,
            'value' => false,
            'save_always' => true,
            'description' => __( 'Check if you want use Mobile Slider.', 'js_composer' ),
        ),

そして（plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php）：

if ($mobileslide == true) {
    if ( wp_is_mobile() ) :
    $output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $aliasmob . ']' ) );
    else :
    $output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );
    endif;
} else {
    $output .= apply_filters( 'vc_revslider_shortcode', do_shortcode( '[rev_slider ' . $alias . ']' ) );
}

次に、このようになります。モバイルビュー関数をtrueに設定できます。

スクリーンショット

0
SG52

私はこれに対する答えを際限なく探し、ついにそれを理解しました。テーマがページごとに1つのスライダーのみを呼び出す場合、非表示オプションは適切ではありません。

1）MobileDetectプラグインをインストールします。

2）テーマのどこでスライダーが呼び出されているかを見つけます。私にとってはTHEME/inc /template-hooks.phpにありました

3）そこでこのコードを見つけます：

echo '<div id="main-slideshow">';
putRevSlider($rev_slider);
echo '</div>';

4）これを次のように置き換えます。

echo '<div id="main-slideshow">';
if ( wp_is_mobile() ) :
putRevSlider("ALIAS OF MOBILE SLIDER HERE");
else :
putRevSlider("ALIAS OF DESKTOP SLIDER HERE");
endif;
echo '</div>';

プレスト！！！！

0
Jskillzz

ページで複数のスライダーが開始されている場合、パフォーマンスを最適化しようとすると、スライダーが非表示または表示されていても、Revsliderはすべての背景画像を読み込みます。したがって、この隠蔽ソリューションは視覚的な改善にのみ役立ちます。

0
Saulius Vikerta