회전 슬라이더 모바일 배경 이미지 변경

회전 슬라이더 모바일 배경 이미지 변경

데스크톱으로 브라우즈 할 때 Rev 슬라이더에 딱 맞는 사이트가 있어요.그러나 모바일에서 탐색할 때 슬라이더 이미지가 올바르게 표시되지 않거나 잘립니다.모바일 브라우저가 사이트에 왔을 때 슬라이더 내에서 이미지를 전환하거나 모바일에서 무엇을 할 수 있습니까?css와 바꾸려고 했지만 소용이 없었어요.달리 어떻게 할 수 있을지 모르겠어요.어떤 도움이라도 주시면 감사하겠습니다.

따라서 버전 6에서는 적어도 배경 이미지가 있는 모양 레이어를 추가하고 화면 크기에 따라 해당 레이어를 숨기거나 표시함으로써 이 작업을 수행할 수 있습니다.

1. 새로운 모양 레이어를 만듭니다.
2. 레이어 옵션의 [Size & Pos]를 선택합니다.
3. "Size Presets(사이즈 사전 설정)"를 Cover(커버)로 설정합니다.
4. "레이어 정렬"을 장면으로 설정합니다.
5. 도면층 옵션의 "가시성"으로 이동합니다.
6. 표시하지 않을 모든 화면 크기에서 레이어를 숨깁니다.
7. 모양 도면층이 도면층 스택의 맨 아래에 있는지 확인하십시오.
8. 도면층 선택사항에서 "유형"으로 이동합니다.
9. 배경 이미지를 선택합니다.
10. [ Position ]섹션에서 커버하도록 설정되어 있는지 확인합니다.

그걸로 충분할 거야그게 도움이 됐으면 좋겠어요.

응답 설정에 대해 호들갑을 떨어야 할 수도 있습니다.이러한 설정의 뉘앙스를 잘 모르시는 분은, 이 비디오(Slider Revolution 6.0 Responseive Settings)가 매우 도움이 됩니다.

처음엔, 네가 할 수 있을 줄 알았는데하지만, 알고 보니 할 수 있더군요!슬라이더를 두 개 만들어서 둘 중 하나를 교묘하게 숨기면 돼요.

사진 치수의 문제인 경우는, 각 슬라이더 사이즈에 커스텀 사이즈를 지정할 수 있습니다.모바일로 볼 때 슬라이드의 텍스트를 읽을 수 없게 하기 위해서입니다.모바일 버전의 높이를 늘림으로써 이미지의 텍스트를 읽을 수 있게 되어 문제가 해결되었습니다.

모바일로 볼 때 이렇게 슬라이더를 비활성화할 수도 있습니다.

나는 이것에 대한 답을 끝없이 찾고, 마침내 알아냈다.테마가 페이지당 슬라이더를 하나만 호출하는 경우에는 숨김 옵션이 좋지 않습니다.

1) Mobile Detect 플러그인을 설치합니다.

2) 테마에서 슬라이더를 호출하는 위치를 찾습니다.나는 TEME/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>';

프레스토!!!

페이지에서 여러 슬라이더가 시작되는 경우 성능을 최적화하려고 하면 슬라이더가 숨겨지거나 표시되지만 Revslider는 여전히 모든 배경 사진을 로드합니다.따라서 이 숨겨진 솔루션은 시각적 개선에만 도움이 됩니다.

시각 작곡가를 사용하는 경우:

파일 내의 2개의 함수(plugins/js_composer/include/classes/plugins/class-vendor-revslider.php)에 Array-Variable을 추가합니다.

add 쇼트 코드설정 및 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' ),
)

이제 백엔드 에디터에서 2개의 다른 슬라이더를 설정할 수 있습니다.

적어도 "Jskillz" 응답에서 파일(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개 더 추가합니다.

의 2개의 함수(plugins/js_composer/include/class/vendor/plugins/class-vendor-revslider.php)에 변수를 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로 설정할 수 있습니다.

스크린샷

배경 위치를 변경하기 위한 GUI는 약간 숨겨져 있으며, 다음 URL에서 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/32765871/revolution-slider-change-background-image-on-mobile