Slide with mother div background image exchange

Asked

Viewed 61 times

0

Guys, I’m trying to make a slide that when changing image also change the background image of div "banner" along with the slide image, someone can help me?

<html>
<head>
  <title>Testando slide</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  </head>

<body>
<div class="banner" style="width: 700px; height:300px; padding: 60px;">
 <div class="slider" style="margin: auto;">
<div class="img-slider" data-color="1"><img src="imgs/1.jpg" width="600" height="250"/></div>
<div class="img-slider" data-color="2"><img src="imgs/2.jpg" width="600" height="250"/></div>
<div class="img-slider" data-color="3"><img src="imgs/3.jpg" width="600" height="250"/></div>
<div class="img-slider" data-color="4"><img src="imgs/4.jpg" width="600" height="250"/></div>
<div class="img-slider" data-color="5"><img src="imgs/5.jpg" width="600" height="250"/></div>
<div class="img-slider" data-color="6"><img src="imgs/6.jpg" width="600" height="250"/></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

 <script>
$(document).ready(function(){
  $('.slider').bxSlider({
    auto: true,
    stopAuto: true,
    slideWidth: 600,
    onSlideNext: function($slideElement, oldIndex, newIndex){
        var corSlide = $('.img-slider').eq( newIndex ).data('color');
        $('.banner').css({ 'background': 'url("imgs/' + corSlide + '.jpg") no-repeat fixed'});
    }
  });
});
</script>

</body>
</html>
javascript slide

1 answer

0


Swap out the callback onSlideNext for onSlideAfter and seek the src of the image in the div that contains the attribute aria-hidden="false". It will replace the div background with the image being displayed:

Behold:

$(document).ready(function(){
  $('.slider').bxSlider({
    auto: true,
    stopAuto: true,
    slideWidth: 600,
    onSlideAfter: function(){
        var corSlide = $('.slider div[aria-hidden="false"] img').attr('src');
        $('.banner').css({ 'background': 'url(' + corSlide + ') no-repeat fixed'});
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<div class="banner" style="width: 700px; height:300px; padding: 60px;">
   <div class="slider" style="margin: auto;">
      <div class="img-slider" data-color="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="600" height="250"/></div>
      <div class="img-slider" data-color="https://tinyjpg.com/images/social/website"><img src="https://tinyjpg.com/images/social/website.jpg" width="600" height="250"/></div>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

Browser other questions tagged javascript slide

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