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

[Slider Revolution 6]可根据每张幻灯片[自定义字段]来更改页面的背景颜色 1Slider Revolution
这篇文章约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’)
);
});

This effectively adds either the “sr-light” or “sr-dark” class to the body element of the page.

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

现在,由于自定义类名称已添加到“ body”元素中,因此可以实现多种可能性。这是一个例子:

/ *更改页面“ entry-content” div中所有文本的颜色* /
body.sr-light .entry-content {颜色:#FFF}
body.sr-dark .entry-content {颜色:#000}

评论

复制标题和 URL