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

Question

我将 RoyalSlider 用于我的网站，并且我想将每个滑块的背景颜色更改为不同的颜色。

我要更改的 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}