El control deslizante Revolution cambia la imagen de fondo en el móvil

6 minutos de lectura

Tengo un sitio que funciona perfectamente con el control deslizante de revoluciones cuando navego con una computadora de escritorio. Pero al navegar desde el móvil, las imágenes del control deslizante no se muestran correctamente o se cortan. ¿Hay alguna manera de cambiar las imágenes dentro del control deslizante cuando los navegadores móviles llegan al sitio o qué puedo hacer para dispositivos móviles? Intenté cambiar con css pero eso no funcionó. No estoy seguro de qué más se puede hacer. Cualquier ayuda sería muy apreciada.

Entonces, al menos en la versión 6, puede hacer esto agregando una capa de forma con una imagen de fondo y ocultar/mostrar esa capa según el tamaño de la pantalla.

  1. Haz una nueva capa de forma.
  2. Vaya a “Tamaño y posición” en las opciones de capa.
  3. Establezca los “Preajustes de tamaño” en Cubrir.
  4. Establezca la “Alineación de capa” en Escena.
  5. Ve a “Visibilidad” en las opciones de capa.
  6. Oculta la capa en todos los tamaños de pantalla en los que no quieras que se muestre.
  7. Asegúrese de que su capa de forma esté en la parte inferior de la pila de capas.
  8. Ve a “Estilo” en las opciones de capa.
  9. Elige una imagen de fondo.
  10. Asegúrate de que esté configurado para cubrir en la sección Posición.

Y eso debería hacerlo. Espero que eso ayude a alguien.

Es posible que tenga que preocuparse por la configuración receptiva. Si realmente no comprende los matices de estas configuraciones, encontré este video (Configuración receptiva de Slider Revolution 6.0) muy útil.

  • ¡He probado esto, funcionó perfectamente! Sin embargo, cuando cambio entre diapositivas, durante un segundo, aparece la imagen de fondo del escritorio y luego viene la otra diapositiva. Actualmente estoy tratando de encontrar una manera de arreglar esto

    – MarounG

    3 de enero de 2021 a las 11:52

  • Eso es patético. Me pregunto si la imagen que se carga tarde es excepcionalmente grande. Ese es el primer lugar donde buscaría de todos modos.

    – Josh Costa

    4 de enero de 2021 a las 16:21

  • Gracias por responder. Finalmente logré arreglarlo. Tuve que editar las transiciones de las diapositivas para que funcionara.

    – MarounG

    10 de enero de 2021 a las 8:36

avatar de usuario
BryanDeLaTierra

Al principio, no pensé que pudieras. ¡Pero resulta que puedes! Solo tiene que hacer dos controles deslizantes, luego ocultar inteligentemente uno u otro.

Si solo se trata de las dimensiones de la imagen, puede personalizar el tamaño de cada control deslizante. He hecho esto para adaptarme a la imposibilidad de leer el texto en las diapositivas cuando se ven en un dispositivo móvil. Al estirar la altura de la versión móvil, ahora puedo leer el texto de las imágenes y, por lo tanto, el problema está resuelto.

También puede simplemente deshabilitar el control deslizante cuando lo ve en un dispositivo móvil, como esto.

  • muchas gracias por su rápida respuesta, en realidad estaba mirando ese artículo, pero el único problema que tengo es que estoy usando betheme y solo me permite agregar una diapositiva a la parte principal del sitio, así que si hubiera una manera para llamarlo externamente sin que esté en la página que sería increíble? ¿Sabes si algo así es posible?

    – Brad Avellana

    24/09/2015 a las 16:22

  • ¿Cómo te limita a tener solo un control deslizante en la página principal? no puedes usar [slider_name] ¿etiqueta?

    – BryanOfEarth

    24/09/2015 a las 16:39

  • sí, no vi dónde puedo agregarlos manualmente, pero ahora funciona. Gracias por tu ayuda amigo, te lo agradezco.

    – Brad Avellana

    24 de septiembre de 2015 a las 17:16

avatar de usuario
jskillzz

He buscado sin cesar la respuesta a esto, y finalmente lo descubrí. La opción de ocultar no es buena si su tema solo llama a un control deslizante por página.

1) Instale el complemento Mobile Detect.

2) Encuentre dónde se llama el control deslizante en su tema. Para mí estaba en THEME/inc/template-hooks.php

3) Encuentra este código allí:

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

4) Reemplace esto con:

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>';

¡¡¡¡PRESTO!!!!

  • Jskillzz … tiene una buena solución si es difícil codificar la función de control deslizante de revoluciones en una página. Mi problema es … Estoy desarrollando un tema personalizado y usando el complemento “Visual Composer” para el diseño de mi página de inicio e insertando el código abreviado del control deslizante. Supongo que su solución no funcionará entonces. Gracias.

    – mario

    23 de julio de 2017 a las 18:37


En el caso de que se inicien varios controles deslizantes en la página, si intenta optimizar el rendimiento, Revslider seguirá cargando todas las imágenes de fondo, a pesar de que los controles deslizantes estarán ocultos o visibles. Entonces, esta solución de ocultación solo ayuda para las mejoras visuales.

avatar de usuario
SG52

Si su plantilla está usando Visual Composer:

Agregue Array-Variable a 2 funciones en el archivo (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php):

addShortcodeConfiguraciones y 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' ),
)

Ahora puede configurar 2 controles deslizantes diferentes en el editor de fondo.

Al menos coloque la detección móvil de la respuesta de “Jskillzz” en el archivo (plugins/js_composer/include/templates/shortcodes/rev_slider_vc.php):

Cambiar de :

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

A :

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;

¡PASTA!

EDITAR: Las diapositivas sin configuración móvil producen un error extraño, por lo que colocamos 1 opción más (casilla de verificación) para configurar diferentes diapositivas móviles como falsas como predeterminadas, así:

Agregue 1 variable más en las 2 funciones en (plugins/js_composer/include/classes/vendors/plugins/class-vc-vendor-revslider.php):

        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' ),
        ),

Y en (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 . ']' ) );
}

Entonces se ve así, podemos configurar la función de vista móvil en verdadero:

Captura de pantalla

avatar de usuario
maka

La GUI para cambiar la posición de fondo está un poco oculta y puede encontrarla aquí:

ingrese la descripción de la imagen aquí

¿Ha sido útil esta solución?