改变容器背景每张幻灯片

我有以下结构的滑块：改变容器背景每张幻灯片

<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

来源

2017-10-15 JohnDkr

你使用的插件是什么（你的小提琴没有任何滑块功能）？首先，检查浏览器检查器工具在幻灯片处于活动状态时DOM中的哪些变化（某些类被添加到其div，另一个div出现等）。 –

@A。伊格莱西亚斯我正在使用[fractionslider]（http://jacksbox.de/stuff/jquery-fractionslider/）。您可以在官方网站上查看演示。 – JohnDkr

检查与浏览器检查插件的演示，它看起来像当幻灯片被激活，插件添加类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(); 
    } 
});

来源

2017-10-15 19:47:00

改变容器背景每张幻灯片

回答

相关问题