Тема Divi Wordpress - изменение скорости перехода слайдов

Я использую Divi на сайте, который я создаю для клиента, и на главной странице у меня есть предварительная установка, чтобы загрузить страницу и изображения в фоновом режиме до того, как сайт покажет. Единственная проблема заключается в том, что первый слайд ползунка Divi fullwidth запускается одновременно с загрузкой страницы, поэтому, когда предварительный загрузчик выполнен и исчезает на экране, первый слайд слишком быстро изменяется на второй слайд.

Я спросил ElegantThemes, и они говорят, что мой запрос выходит за рамки поддержки. Я даже не знаю, с чего начать корректировать что угодно, чтобы только ПЕРВОЕ время слайдов было больше, чем другие слайды.

Итак, я думаю, мой вопрос: Как изменить время перехода только для FIRST-слайда на ползунок Divi Fullwidth?

Здесь ссылка: http://mfinangaphoto.wpengine.com

Я думаю, что нашел код, который определяет, будет ли скорость автоматической анимации слайдов под /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;

Как я могу настроить это так, чтобы первый слайд имел другую скорость скольжения, чем остальные слайды?

Ответ 1

Не знаете, какую версию Divi вы используете, но в моей версии (Divi 1.9.1) есть файл с именем js/custom.js, который отвечает за запуск слайд-шоу.

Вокруг линий 119 - 125 вы найдете эту функцию:

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

Переменная settings.slideshow_speed управляет количеством времени, которое будет отображаться каждым слайдом. Возможно, вы можете настроить этот файл, как показано ниже. Обратите внимание, что следующее является псевдокодом на лету и не проверяется. Он прокомментировал это, чтобы вы могли следовать. Мой пример будет обрабатывать ОЧЕНЬ первый слайд вашей карусели. Таким образом, когда первый слайд повторяется, вы будете застряли с теми же настройками синхронизации, что и другие слайды, если вы не сделаете еще один взлом.

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

Надеюсь, что это поможет.