Question

我有一个具有以下结构的滑块：

<div class="wrapper">
    <div class="slide" id="slide1">
        <p>Slide1 Content</p>
    </div>        
    <div class="slide" id="slide2">
        <p>Slide1 Content</p>
    </div>
</div>

包装宽度为100％，但幻灯片div的最大宽度（以像素为单位）（即400px）。有没有办法改变每张幻灯片的包装背景？我的意思是例如当第一张幻灯片处于活动状态时，包装器背景变为黄色，当第二张幻灯片处于活动状态时，包装器背景变为红色。据我所知，使用CSS无法做到这一点。那么有可能使用jquery吗？我尝试了.wrapper:has()选择器但它没有按照我预期的方式工作。

$(document).ready(function() {
    if($(".wrapper:has(#slide1)")) {
        $(".wrapper").css("background-color","yellow");
    } else if($(".wrapper:has(#slide2)")) {
        $(".wrapper").css("background-color","red");
    }
});

它将背景变为黄色，因为包装器属于两个幻灯片。你知道怎么让它以我想要的方式工作吗？

注意：我不是滑块插件的作者，所以我无法更改整个滑块代码。我只是想做一些定制来满足我的需求。

JSFiddle

Answer 1

使用浏览器检查器检查插件演示，看起来当幻灯片处于活动状态时，插件会将类active-slide添加到幻灯片div。

同样在文档中显示，在插件激活中，您可以配置回调以在不同事件（http://jacksbox.de/stuff/jquery-fractionslider/plugin-options-reference/）上执行。因此将背景颜色更改放在相应的回调中。类似的东西（检查所有回调，验证你想要应用它的位置）......

function setActiveSlideBackground() {
    var activeSlideId = $('div.slide.active-slide').attr('id');
    if (activeSlideId == 'slide1')
        $('div.wrapper').css('background','yellow');
    else if (activeSlideId == 'slide2')
        $('div.wrapper').css('background','red');
}

$('.slider').fractionSlider({
    'nextSlideCallback': function(el,currentSlide,lastSlide,step) {
        setActiveSlideBackground();
    },
    'prevSlideCallback': function(el,currentSlide,lastSlide,step) {
        setActiveSlideBackground();
    }
});

更改每张幻灯片的容器背景

1 个答案: