jquery - RoyalSlider 使用每张幻灯片从 div 更改背景

Question

我为我的网站使用 RoyalSlider，我想将每个 slider 的背景颜色更改为不同的颜色。

我要更改的 div 是#slide6，如下所示:

$('#slide6').css({"background-color":"red"});

但我不知道该怎么做。这是 HTML 结构

<div id="content-slider-1" class="royalSlider contentSlider rsDefault">
    <div> 
    <h3>Slide HTML Text</h3>
    <p>This is dummy copy.</p>
    <span class="rsTmb">HTML text</span>
    </div>

也许我可以使用类似 data-color='red' 的东西，然后将 if/else 用于背景颜色？

我可以通过以下方式查看每张幻灯片的数据:

var slider = $('#content-slider-1').data('royalSlider');
    slider.ev.on('rsBeforeAnimStart', function() { 
        console.log( $('#content-slider-1').data('royalSlider').currSlide ); 
});

有人可以帮我解决这个问题吗？非常感谢!

Answer 1

您可以在包装每张幻灯片的 div 上添加一个类，并通过 CSS 控制背景颜色

<div id="content-slider-1" class="royalSlider contentSlider rsDefault">
<div class="slide1"> 
<h3>Slide HTML Text</h3>
<p>This is dummy copy.</p>
<span class="rsTmb">HTML text</span>
</div>
<div class="slide2"> 
<h3>Slide HTML Text</h3>
<p>This is dummy copy.</p>
<span class="rsTmb">HTML text</span>
</div>

.slide1 {background-color: red}
.slide2 {background-color: blue}