Every time that a html element take the class "active" change or add class to another

Question

I have a slider with autoplay. Every 5 sec a different element from slideshow with different class take the class "active" and you can see the different slide. as usually.

<style>
.topHeaderOfSite.slide1{background-color:red;}
.topHeaderOfSite.slide2{background-color:green;}
.topHeaderOfSite.slide3{background-color:yellow;}
</style>

<div class="topHeaderOfSite">
   //some code here...
</div>

<div class="slides">
    <div class="slide1 active">
       //img ...
    </div>
    <div class="slide2">
       //img ...
    </div>
    <div class="slide3">
       //img ...
    </div>
</div>

I want, every time than "active" class change slide eg: "slide2 active", "slide3 active", on element with class="topHeaderOfSite" add the class of slide element.

<div class="topHeaderOfSite slide1">
   //some code here...
</div>

i want this to change the "topHeaderOfSite" background-color, defferent slide, defferent color.

I try this by my self but its work only for first slide, if i change slide and active go to '.slide2', the '.topHeaderOfSite' still continue have the class '.topHeaderOfSite.slide1'

jQuery(document).ready(addClassToTop);
function addClassToTop() {
    if($('.slide1').hasClass("active")){
        $('.topHeaderOfSite').addClass("slide1");
    }else if($('.slide2').hasClass("active")){
        $('.topHeaderOfSite').addClass("slide2");
    }else if($('.slide3').hasClass("active")){
        $('.topHeaderOfSite').addClass("slide3");
    }else{$('.topHeaderOfSite').addClass("nothingHappen");
}

You can check live in site http://www.zaxaropolis.gr/nextgen/index.php The classes are defferents but you can understand.

i am using joomla and the slider is a component, the name of slider is "Smart Slider 3", but I dont think that you need the code. I am looking for a solution, i suppose (java), that add class on "topHeaderOfSite", every time that "active" class go to deffernet slide. — Alexikakos, Jun 20 '17 at 06:22
The solution that worked for me is [here](https://stackoverflow.com/a/9609065/6477961) — Dimitra, Jun 20 '17 at 12:55
you can find a working solution [here](https://stackoverflow.com/a/9609065/6477961) It worked for me without problems. — Dimitra, Jun 20 '17 at 12:58

score 0 · Answer 1 · answered Jun 19 '17 at 14:35

The below might helps you. Using keyframe animations but tailored for 3 slides.

.topHeaderOfSite {
  height: 50px;
  width: 100%;
  animation: tops 15s infinite;
}

@keyframes tops {
  0%, 100%
 {
    background: #FF0000
  }
  33.33% {
    background: #333
  }
  66.66% {
    background: #666
  }
}

.slides {
  position: relative;
}

.slides div {
  position: absolute;
  opacity: 0;
  animation: FadeIn 15s infinite;
}


@keyframes FadeIn { 
  0% { opacity:0; transform:opacity(0);}
  30% {opacity:1; transform:opacity(1);}
  33.33% { transform:opacity(0); }
}

.slides div:nth-child(1){ animation-delay: 0s }
.slides div:nth-child(2){ animation-delay: 5s }
.slides div:nth-child(3){ animation-delay: 10s }

<div class="topHeaderOfSite"></div>

<div class="slides">
  <div>
    <img src="http://placehold.it/200/333333">
  </div>
  <div>
    <img src="http://placehold.it/200/666666">
  </div>
  <div>
    <img src="http://placehold.it/200/FF0000">
  </div>
</div>

thanks for your response css works fine, if slides change every 5 sec. But what happen when someone change the slide by using arrows (before 5 sec), or if the time change? I prefer a solution with java. — Alexikakos, Jun 20 '17 at 06:09

Every time that a html element take the class "active" change or add class to another

1 Answers1