CODEWITHSUNDEEP
javascriptjquerycss
fairydragon
fairydragon

Reputation: 146

Slider control of outside elements

Hi I have made a slider using slick. I cant for the life of me figure out how to change the background colour of my header when the slides change (which is positioned over the top of the slider).

I am wanting to change the header background to black and text color to white when the second slide becomes visible.

I have gone round in circles all morning trying to figure out a way to do this, I have even tried to duplicate the header and use inside each slide but that brought me many more problems.

Is this at all possible? And if so how? I am hoping somebody can point me in the right direction! thanks

My code as follows:

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

Please see my fiddle: jsfiddle

Upvotes: 0

Views: 402

Answers (2)

andy jones
andy jones

Reputation: 922

You need to use before slide change, this is a slick slider function that you can use, here is a little code snippet:

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

As you can see from the console log, it will drop out the current slide, you can then use jQuery to target your header and drop a class on to it.

Then use css to target the header & change the colour quick sort of example:

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

Target with css

header {
    background: white;
}

header.slide-1 {
    background: red;
}

Hope this helps.

Upvotes: 0

user6742604
user6742604

Reputation: 

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

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

Works, but is not a very pretty solution. The .slick-slide class is overwriting all your other classes somehow, can't figure out how to make the secondSlide class overwrite it except with an id.

Upvotes: 1

Related Questions