Divi WordPress的主题 - 更改幻灯片转换速度

我在我为客户建立的网站上使用Divi，并在主页上有一个预加载器设置，用于在网站显示前加载页面和图像。唯一的问题是，Divi全宽滑块中的第一张幻灯片在页面加载的同时开始，所以当预加载器完成并淡出屏幕时，第一张幻灯片会更快转换到第二张幻灯片。Divi WordPress的主题 - 更改幻灯片转换速度

我问过ElegantThemes，他们说我的请求超出了支持范围。我甚至不知道从哪里开始调整，因此只有第一张幻灯片的时间比其他幻灯片长。

所以，我想我的问题是，如何更改Divi Fullwidth Slider上第一张幻灯片的转换时间？

这里的链接:: http://mfinangaphoto.wpengine.com

我想我已经找到了确定的代码，如果幻灯片自动动画速度，下/可湿性粉剂内容/主题/迪维/包括/建设者/ 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;

我该如何调整它，使其允许第一张幻灯片具有与其他幻灯片不同的幻灯片速度？

来源

2017-01-19 Trisha

因为您使用简单的淡入淡出幻灯片，我会建议避免使用类似这个复杂的插件，特别是如果你了解JS。或者选择一个更简单的插件，例如https://wordpress.org/plugins/easing-slider/ – pottedmeat7

，您可以尝试使用jQuery将选择器添加到该“幻灯片”中，并使用新的替代替换当前的转换;特定于该幻灯片，虽然哈克 –

不确定您使用的是哪个版本的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()); 
    } 
}

希望有帮助。

来源

2017-02-24 23:06:26 awei

Divi WordPress的主题 - 更改幻灯片转换速度

回答

相关问题