0

Web サイトに 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 ); 
});

誰かがこれで私を助けることができますか? どうもありがとうございました！

4

1 に答える 1

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}
于 2013-03-13T14:17:21.170 に答える