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

【问题标题】：Change the container background for each slide更改每张幻灯片的容器背景
【发布时间】：2017-10-15 18:17:00
【问题描述】：

我有一个结构如下的滑块：

<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 具有以像素为单位的最大宽度（即 400 像素）。有没有办法改变每张幻灯片的包装背景？我的意思是，例如，当第一张幻灯片处于活动状态时，包装背景变为黄色，而当第二张幻灯片处于活动状态时，包装背景变为红色。据我所知，没有办法使用 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

【问题讨论】：

您使用的是什么插件（您的小提琴没有任何滑块功能）？首先，使用浏览器检查器工具检查幻灯片处于活动状态时 DOM 发生了什么变化（在其 div 中添加了一些类，出现另一个 div 等）。
@A.伊格莱西亚斯我正在使用fractionslider。可以在官网查看demo。

标签： javascript jquery html css slider

【解决方案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();
    }
});

【讨论】：