Slider Kontrolle von außen Elemente

Hallo Ich habe einen Schieber mit Slick gemacht. Ich kann für das Leben von mir nicht herausfinden, wie man die Hintergrundfarbe meiner Überschrift ändert, wenn sich die Dias ändern (die über der Oberseite des Schiebers positioniert sind).Slider Kontrolle von außen Elemente

Ich wünsche den Header Hintergrund schwarz und Textfarbe auf Weiß zu ändern, wenn der zweite Schieber sichtbar wird.

Ich bin den ganzen Morgen im Kreis herumgereist, um einen Weg zu finden, dies zu tun, ich habe sogar versucht, den Header zu duplizieren und in jeder Folie zu verwenden, aber das brachte mir viele weitere Probleme.

Ist das überhaupt möglich? Und wenn ja wie? Ich hoffe, dass jemand mich in die richtige Richtung weisen kann! Dank

Mein Code wie folgt:

HTML

<header>hi this is the vavigation</header> 

<div class="sliderlastvid"> 
<div class="videocontainer"> 
    <div class="video"> 
     <div class="video-titre">slide1</div> 
    </div> 
</div> 
<div class="videocontainer" style="background: white;"> 
    <div class="video"> 
     <div class="video-titre">slide2</div> 
    </div> 
</div> 
<div class="videocontainer" style="background: yellow;"> 
    <div class="video"> 
     <img src="" alt=""></img> 
     <div class="video-titre">Slide3</div> 
    </div> 
</div>

CSS

body {background: navy; margin: 0; } 
header { width: 100%; height: 30px; color: pink; position: absolute; top: 0; left: 0; border-bottom: 1px solid; z-index: 99; } 

.slider { 
width: auto; 
margin: 30px 50px 50px; 
} 
.slick-slide { 
background: #081449; 
color: white; 
padding: 20px 0; 
font-size: 30px; 
font-family: "Arial", "Helvetica"; 
text-align: center; 
img { display: inline-block; } 
}

JQUERY

$(document).ready(function() { 
$('.sliderlastvid').slick({ 
    infinite: true, 
    slidesToShow: 1, 
    slidesToScroll: 1 
}); 
});

Sehen Sie bitte meine Geige: jsfiddle

Quelle

2016-11-18 fairydragon

Sie müssen vor Diatransport verwenden, ist diese Funktion eine glatte Slider ist, die Sie hier verwenden können, ist ein wenig Code-Schnipsel:

$('.sliderlastvid').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
    console.log(currentSlide); 
});

Wie Sie aus dem Konsolenprotokoll sehen können, wird es fällt aus In der aktuellen Folie können Sie dann mit jQuery Ihre Kopfzeile markieren und eine Klasse darauf platzieren.

Dann CSS verwenden, um die Header-Ziel & die Farbe schnell Art Beispiel ändern:

$('.sliderlastvid').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
    $('header').addClass('slide-' + currentSlide); 
});

Ziel mit css

header { 
    background: white; 
} 

header.slide-1 { 
    background: red; 
}

Hoffnung, das hilft.

Quelle

2016-11-18 14:22:14

Vielen Dank für diese, setzen diese mich auf dem richtigen Weg. Ich habe den Code etwas modifiziert, so dass jede Folie außer der ersten die Klasse slide-1 $ ('. SlickContainer') hat. On ('afterChange', Funktion (event, slick, currentSlide) { if (currentSlide === 0) { $ ('. Header-menu'). RemoveClass ('slide-1'); } sonst { $ ('. Header-menu'). AddClass ('slide-1'); } }); – fairydragon

Froh, dass ich helfen konnte. –

<div class="video-titre" id="secondSlide">slide2</div> 

#secondSlide { 
    background: black; 
    color: white; 
}

Funktioniert, aber ist keine sehr schöne Lösung. Die .slick-slide-Klasse überschreibt alle anderen Klassen irgendwie und kann nicht herausfinden, wie sie die secondSlide-Klasse außer mit einer ID überschreiben kann.

Quelle

2016-11-18 14:15:29

Slider Kontrolle von außen Elemente

Antwort

Verwandte Themen