Divi Wordpress Theme - Change Slide transition speed

Question

I'm using Divi on a site I'm building for a client, and on the homepage I have a preloader setup to load the page and images in the background before the site shows. The only issue with this, is that the first slide in the Divi fullwidth slider starts at the same time the page loads, so when the preloader is done and fades off of the screen, the first slide changes to the second slide too fast.

I've asked ElegantThemes, and they say that my request is out of the scope of support. I don't even know where to begin adjusting anything so that only the FIRST slide's timing is longer than the other slides.

So, I guess my question is, How can I change the transition timing for only the FIRST slide on a Divi Fullwidth Slider?

Here's the link:: http://mfinangaphoto.wpengine.com

I think I've found the code that determines if the automatic animation speed of the slides, under /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;

How can I adjust this so that it allows the first slide to have a different slide speed than the rest of the slides?

Answer 1

Not sure which version of Divi you're using, but in my version (Divi 1.9.1) there is a file called js/custom.js which is responsible for running the slide show.

Around lines 119 - 125, you'll find this function:

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 );
    }
}

The settings.slideshow_speed variable controls the amount of time that each slide will display. You can probably tweak this file as below. Note that the following is on-the-fly pseudo-code and not tested. It's commented so you can follow along. My example will only handle the VERY first slide of your carousel. So, when the first slide repeats, you'll be stuck w/ the same timing controls as the other slides unless you do some more hacking.

// 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() );
  }
}

Hope that helps.