- 根据每张幻灯片[自定义字段]来更改页面的背景颜色
- 1.编辑一张幻灯片,然后在“常规幻灯片设置”中,将以下内容之一添加到“ HTML数据”部分:
- 2.接下来,为“ sr-light”或“ sr-dark” 添加一些自定义样式(我们将在“ data-color”值前加上“ sr-”,以帮助避免CSS命名冲突)。
- 3. Finally, add the following Custom JavaScript:
- This effectively adds either the “sr-light” or “sr-dark” class to the body element of the page.
- 现在,由于自定义类名称已添加到“ body”元素中,因此可以实现多种可能性。这是一个例子:
根据每张幻灯片[自定义字段]来更改页面的背景颜色
1.编辑一张幻灯片,然后在“常规幻灯片设置”中,将以下内容之一添加到“ HTML数据”部分:
data-color =“ light”
data-color =“ dark”
![[Slider Revolution 6]可根据每张幻灯片[自定义字段]来更改页面的背景颜色 2 [Slider Revolution 6]可根据每张幻灯片[自定义字段]来更改页面的背景颜色 2](https://aladd.net//wp-content/uploads/2020/05/data-color-1.png)
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’)
);
});
This effectively adds either the “sr-light” or “sr-dark” class to the body element of the page.
![[Slider Revolution 6]可根据每张幻灯片[自定义字段]来更改页面的背景颜色 3 [Slider Revolution 6]可根据每张幻灯片[自定义字段]来更改页面的背景颜色 3](https://aladd.net//wp-content/uploads/2020/05/body-class-1.png)
现在,由于自定义类名称已添加到“ body”元素中,因此可以实现多种可能性。这是一个例子:
/ *更改页面“ entry-content” div中所有文本的颜色* /
body.sr-light .entry-content {颜色:#FFF}
body.sr-dark .entry-content {颜色:#000}