改變容器背景每張幻燈片

我有以下結構的滑塊：改變容器背景每張幻燈片

<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

改變容器背景每張幻燈片

回答

相關問題