Changer le fond du conteneur pour chaque diapositive

Question

j'ai un curseur ayant la structure suivante:

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

La largeur de bande est de 100%, mais les divs de glissement ont un maximum de largeur en pixels (par exemple 400px.). Existe-t-il un moyen de modifier l'arrière-plan du wrapper pour chaque diapositive? Je veux dire par exemple lorsque la première diapositive est active, l'arrière-plan du wrapper devient jaune et lorsque la deuxième diapositive est active, l'arrière-plan du wrapper devient rouge. Comme je sais, il n'y a aucun moyen de le faire en utilisant CSS. Alors est-il possible de le faire en utilisant jquery? J'ai essayé le sélecteur .wrapper:has() mais ça ne fonctionne pas comme je l'espérais.

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

L'arrière-plan devient jaune car l'encapsuleur appartient aux deux diapositives. Avez-vous une idée de comment le faire fonctionner comme je le veux?

Note: Je ne suis pas l'auteur du plugin de curseur, donc je ne peux pas changer les codes de glisseur entiers. Je veux juste faire quelques personnalisations pour répondre à mes besoins.

JSFiddle

Answer 1

Vérification de la démonstration du plug-in avec l'inspecteur du navigateur, il semble que lorsqu'une diapositive est active, le plug-in ajoute la classe active-slide à la diapositive div.

La documentation montre également que dans l'activation du plugin, vous pouvez configurer des rappels à exécuter sur différents événements (http://jacksbox.de/stuff/jquery-fractionslider/plugin-options-reference/). Mettez donc le changement de couleur d'arrière-plan à l'intérieur du rappel correspondant. Quelque chose comme (vérifiez tous les rappels, pour vérifier où vous voulez l'appliquer) ...

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(); 
    } 
});