RoyalSlider меняет фон с div с каждым слайдом

Question

Я использую RoyalSlider для своего сайта, и я хочу изменить свой цвет фона на другой цвет с каждым слайдером.

ДИВ, что я хочу изменить это # 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 затем с, если/еще на цвет фона?

я могу видеть данные из каждого слайда с:

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}