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> 

也许我可以使用类似数据色='与red'and随后的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}