[Slider Revolution 6]可根据每张幻灯片[自定义字段]来更改页面的背景颜色

Slider Revolution

发布日期：2021-01-04 09:08:56 发布日期：2018-02-04 05:22:57

这篇文章约2分阅读完。

根据每张幻灯片[自定义字段]来更改页面的背景颜色

根据每张幻灯片[自定义字段]来更改页面的背景颜色

1.编辑一张幻灯片，然后在“常规幻灯片设置”中，将以下内容之一添加到“ HTML数据”部分：

data-color =“ light”
data-color =“ dark”

[Slider Revolution 6]可根据每张幻灯片[自定义字段]来更改页面的背景颜色 2

2.接下来，为“ sr-light”或“ sr-dark” 添加一些自定义样式（我们将在“ data-color”值前加上“ sr-”，以帮助避免CSS命名冲突）。

/ *为页面的背景色设置动画* /
正文{过渡：background-color 0.5s缓和}

/* custom styles for the custom classes that will get added */
body.sr-dark {background-color: #000}
body.sr-light {background-color: #FFF}

3. Finally, add the following Custom JavaScript:

// change “revapi1” below to whatever API name is assigned to your slider
var api = revapi1.on(‘revolution.slide.onchange’, function(e, data) {
jQuery(‘body’).removeClass(‘sr-light sr-dark’).addClass(
‘sr-‘ + api.find(‘rs-slide’).eq(data.slideIndex – 1).attr(‘data-color’)
);
});