首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Divi Wordpress主题-更改幻灯片转换速度

Divi Wordpress主题-更改幻灯片转换速度
EN

Stack Overflow用户
提问于 2017-01-19 19:51:39
回答 1查看 5.1K关注 0票数 16

我正在为客户端构建的站点上使用Divi,在主页上,我有一个预加载程序设置,在站点显示之前加载页面和背景图像。唯一的问题是,Divi全宽滑块中的第一张幻灯片是在页面加载的同时开始的,所以当预加载器完成并从屏幕上淡出时,第一张幻灯片更改到第二张幻灯片的速度太快。

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

所以,我想我的问题是,,我怎样才能更改Divi全宽滑翔机上的第一张幻灯片的转换时间?

下面是链接::http://mfinangaphoto.wpengine.com

我想我已经找到了决定幻灯片自动动画速度的代码,在/wp-content/themes/Divi/includes/builder/main-modules.php:下

代码语言:javascript
运行
复制
$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;

我如何调整这一点,使第一张幻灯片有一个不同的幻灯片速度与其他幻灯片?

EN

Stack Overflow用户

回答已采纳

发布于 2017-02-24 23:06:26

不确定您使用的是哪个版本的Divi,但在我的版本(Divi 1.9.1)中,有一个名为js/custom.js的文件,负责运行幻灯片显示。

在第119 - 125行周围,您将看到以下函数:

代码语言:javascript
运行
复制
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变量控制每张幻灯片显示的时间量。您可能可以按以下方式调整该文件。请注意,以下是正在运行的伪代码,没有测试.它是评论的,所以你可以跟随。我的例子将只处理你的旋转木马的第一张幻灯片。因此,当第一个幻灯片重复时,除非您再进行一些黑客攻击,否则您将被困在与其他幻灯片相同的时间控制上。

代码语言:javascript
运行
复制
// 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() );
  }
}

希望这能有所帮助。

票数 7
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41750486

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档