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}

RoyalSlider使用每张幻灯片更改div的背景

1 个答案: