Divi WordPress Theme – Cambiar la velocidad de transición de diapositivas

4 minutos de lectura

avatar de usuario
Trisha

Estoy usando Divi en un sitio que estoy creando para un cliente, y en la página de inicio tengo una configuración de precargador para cargar la página y las imágenes en segundo plano antes de que se muestre el sitio. El único problema con esto es que la primera diapositiva en el control deslizante Divi de ancho completo comienza al mismo tiempo que se carga la página, por lo que cuando el precargador finaliza y desaparece de la pantalla, la primera diapositiva cambia a la segunda demasiado rápido.

Le pregunté a ElegantThemes y me dijeron que mi solicitud está fuera del alcance del soporte. Ni siquiera sé por dónde comenzar a ajustar algo para que solo el tiempo de la PRIMERA diapositiva sea más largo que las otras diapositivas.

Entonces, supongo que mi pregunta es, ¿Cómo puedo cambiar el tiempo de transición solo para la PRIMERA diapositiva en un control deslizante de ancho completo Divi?

Aquí está el enlace:: http://mfinangaphoto.wpengine.com

Creo que encontré el código que determina la velocidad de animación automática de las diapositivas, en /wp-content/themes/Divi/includes/builder/main-modules.php:

$fullwidth="et_pb_fullwidth_slider" === $function_name ? 'on' : 'off';

    $class="";
    $class .= 'off' === $fullwidth ? ' et_pb_slider_fullwidth_off' : '';
    $class .= 'off' === $show_arrows ? ' et_pb_slider_no_arrows' : '';
    $class .= 'off' === $show_pagination ? ' et_pb_slider_no_pagination' : '';
    $class .= 'on' === $parallax ? ' et_pb_slider_parallax' : '';
    $class .= 'on' === $auto ? ' et_slider_auto et_slider_speed_' . esc_attr( $auto_speed ) : '';
    $class .= 'on' === $auto_ignore_hover ? ' et_slider_auto_ignore_hover' : '';
    $class .= 'on' === $remove_inner_shadow ? ' et_pb_slider_no_shadow' : '';
    $class .= 'on' === $show_image_video_mobile ? ' et_pb_slider_show_image' : '';

    $output = sprintf(
        '<div%4$s class="et_pb_module et_pb_slider%1$s%3$s%5$s">
            <div class="et_pb_slides">
                %2$s
            </div> <!-- .et_pb_slides -->
        </div> <!-- .et_pb_slider -->
        ',
        $class,
        $content,
        ( $et_pb_slider_has_video ? ' et_pb_preload' : '' ),
        ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
        ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' )
    );

return $output;

¿Cómo puedo ajustar esto para que permita que la primera diapositiva tenga una velocidad de deslizamiento diferente al resto de las diapositivas?

  • Debido a que está usando una presentación de diapositivas de desvanecimiento simple, recomendaría evitar usar algo como este complemento intrincado, especialmente si entiende JS. O elija un complemento más simple como wordpress.org/plugins/easing-control deslizante

    – carne en conserva7

    23 de febrero de 2017 a las 23:43

  • podría intentar agregar un selector a esa ‘diapositiva’ con jQuery y anular su transición actual con una nueva; específico para esa diapositiva, aunque hacky

    – Fred Randall

    28/02/2017 a las 16:00

No estoy seguro de qué versión de Divi estás usando, pero en mi versión (Divi 1.9.1) hay un archivo llamado js/custom.js que es responsable de ejecutar la presentación de diapositivas.

Alrededor de las líneas 119 – 125, encontrarás esta función:

function et_slider_auto_rotate(){
    if ( settings.slideshow && et_slides_number > 1 && ! $et_slider.hasClass( 'et_slider_hovered' ) ) {
        et_slider_timer = setTimeout( function() {
            $et_slider.et_slider_move_to( 'next' );
        }, settings.slideshow_speed );
    }
}

los settings.slideshow_speed La variable controla la cantidad de tiempo que se mostrará cada diapositiva. Probablemente pueda modificar este archivo como se muestra a continuación. Tenga en cuenta que el siguiente es un pseudocódigo sobre la marcha y no se ha probado. Está comentado para que puedas seguirlo. Mi ejemplo solo manejará la MUY primera diapositiva de su carrusel. Por lo tanto, cuando se repita la primera diapositiva, se quedará atascado con los mismos controles de tiempo que las otras diapositivas, a menos que haga más piratería.

// somewhere inside the same function block closure in js/custom.js

// first, create some arbitrary variable to manage whether or not we've started
var hasCarouselStarted

// create our own custom function to get the interval between slides
function getMyInterval () {
  // our carousel has already started, so, return the default interval
  if (hasCarouselStarted) {
    return settings.slideshow_speed
  }
  // we got here, so this is the first time the carousel is start, 
  // mark the flag as true so we won't get here anymore
  hasCarouselStarted = true
  // return time in milliseconds for the first slide. 
  return 1 * 60 * 1000    // 1 min * 60 seconds & 1000 milliseconds
}

function et_slider_auto_rotate(){
  if ( settings.slideshow && et_slides_number > 1 && ! $et_slider.hasClass( 'et_slider_hovered' ) ) {
    et_slider_timer = setTimeout( function() {
      $et_slider.et_slider_move_to( 'next' );
    // use our function to determine slide speed instead of the original settings.slideshow_speed
    }, getMyInterval() );
  }
}

Espero que ayude.

¿Ha sido útil esta solución?