Divi WordPress Theme – Ändern Sie die Übergangsgeschwindigkeit der Folie

Lesezeit: 4 Minuten

Trishas Benutzeravatar
Trischa

Ich verwende Divi auf einer Website, die ich für einen Kunden erstelle, und auf der Homepage habe ich ein Preloader-Setup, um die Seite und Bilder im Hintergrund zu laden, bevor die Website angezeigt wird. Das einzige Problem dabei ist, dass die erste Folie im Divi-Schieberegler in voller Breite gleichzeitig mit dem Laden der Seite beginnt. Wenn der Preloader fertig ist und vom Bildschirm ausgeblendet wird, wechselt die erste Folie zu schnell zur zweiten Folie.

Ich habe ElegantThemes gefragt, und sie sagen, dass meine Anfrage außerhalb des Supportbereichs liegt. Ich weiß nicht einmal, wo ich anfangen soll, etwas anzupassen, damit nur das Timing der ERSTEN Folie länger ist als das der anderen Folien.

Also, ich denke, meine Frage ist, Wie kann ich das Übergangstiming nur für die ERSTE Folie auf einem Divi Fullwidth Slider ändern?

Hier ist der Link:: http://mfinangaphoto.wpengine.com

Ich glaube, ich habe den Code, der die automatische Animationsgeschwindigkeit der Folien bestimmt, unter /wp-content/themes/Divi/includes/builder/main-modules.php gefunden:

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

Wie kann ich dies so anpassen, dass die erste Folie eine andere Foliengeschwindigkeit hat als die restlichen Folien?

  • Da Sie eine einfache Fade-Slideshow verwenden, würde ich empfehlen, so etwas wie dieses verschlungene Plugin zu vermeiden, insbesondere wenn Sie JS verstehen. Oder wählen Sie ein einfacheres Plugin wie wordpress.org/plugins/easing-slider

    – eingemachtes Fleisch7

    23. Februar 2017 um 23:43 Uhr

  • Sie könnten versuchen, dieser “Folie” mit jQuery einen Selektor hinzuzufügen und den aktuellen Übergang mit einem neuen zu überschreiben. spezifisch für diese Folie, wenn auch hacky

    – Fred Randall

    28. Februar 2017 um 16:00 Uhr

Nicht sicher, welche Version von Divi Sie verwenden, aber in meiner Version (Divi 1.9.1) gibt es eine Datei namens js/custom.js die für die Durchführung der Diashow verantwortlich ist.

In den Zeilen 119 – 125 finden Sie diese Funktion:

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

Das settings.slideshow_speed Die Variable steuert die Zeitdauer, die jede Folie angezeigt wird. Sie können diese Datei wahrscheinlich wie folgt optimieren. Beachten Sie, dass es sich bei dem folgenden Pseudocode um einen spontanen Code handelt, der nicht getestet wurde. Es ist kommentiert, damit Sie mitverfolgen können. Mein Beispiel behandelt nur die allererste Folie Ihres Karussells. Wenn sich also die erste Folie wiederholt, bleiben Sie mit den gleichen Zeitsteuerungen wie bei den anderen Folien hängen, es sei denn, Sie hacken noch etwas weiter.

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

Ich hoffe, das hilft.

1401800cookie-checkDivi WordPress Theme – Ändern Sie die Übergangsgeschwindigkeit der Folie

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy