Change bgcolor according to class

Asked

Viewed 609 times

0

For now I do not have much knowledge in JS and I would like to ask a question...

I need to change bgcolor according to the active class. For example: "if the 'active' class is bundled with 'banner-bg-1', the body color is 'Orange''"

Follow the example code:

https://jsfiddle.net/79kzvnnu/13/

javascript html css

  • You can use the event slid.bs.carousel instead of slide.bs.carousel

  • From what I’ve seen . active is "skipping" from the banner-bg-1 to the banner-bg-2, but you want only the banner-bg-1 background to be Orange?

  • Something so simple.... I didn’t notice that detail. I thank the comments and the willingness of all! Following Valdeir’s advice, it all worked out! Just replace slide.bs.Carousel with slid.bs.Carousel and it worked! Thanks

2 answers

1


Maybe you can do it this way, instead of checking the active class in the element, you can take directly by the slide event which element is active, and by setting a data-attribute in the html vc you can determine which color is referring to each item. this way you don’t need to change your javascript every different color, just arrow the data-bg in html.

$(document).ready(function() {
  //seta fundo referente a ao item active por default.
  trocaFundo("orange");

  $('#banner').on('slide.bs.carousel', function(ev) {
    $('body').addClass('animating');
    trocaFundo(ev.relatedTarget.dataset.bg);
  });

  function trocaFundo(color) {
    $('body').css({
      background: color
    });

  }
});
body.animating {
  background: "orange";
  transition: background .7s ease-out;
}

.carousel-inner {
  height: 250px;
}

.carousel-indicators {
  text-align: center;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-8 carousel slide" id="banner" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item banner-bg-1 active" data-bg="orange">
      <div class="col-md-offset-7 col-md-5">
        <div class="banner-texto">
          <h1>orange/laranja</h1>
        </div>
      </div>
    </div>
    <div class="item banner-bg-2" data-bg="gray">
      <div class="col-md-offset-7 col-md-5">
        <div class="banner-text">
          <h1>grey/cinza</h1>
        </div>
      </div>
    </div>
    <ol class="carousel-indicators">
      <li data-target="#banner" data-slide-to="0" class="banner-li-1 active"></li>
      <li data-target="#banner" data-slide-to="1" class="banner-li-2"></li>
    </ol>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  • Wow Israel, just sensational your solution! The code has become even simpler and semantic to understand. I need to study more JS hahaha Thanks, hugs!

  • Oops, thanks buddy! We’re here to help. Good studies!

0

The event slid.bs.carousel occurs after the slide is active.

$('#banner').on('slid.bs.carousel', function (ev) {
    mudaBG();
});

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.