Change the background-image of the div according to the banner image

Question

I need to create an effect on my slideshow that for each image displayed in the slideshow the background of div class="banner-backg" change the background-image.

For the slider I’m using the http://bxslider.com/options

: HTML by Slider

<div class="banner-backg">
    <div class="banner-center">
        <ul class="bxslider">
            <li><img src="images/banner_1.png" /></li>
            <li><img src="images/banner_2.png" /></li>
            <li><img src="images/banner_3.png" /></li>
        </ul>
    </div>
</div>

: jQuery

$('.bxslider').bxSlider({
    adaptiveHeight: true,
    mode: 'fade',
    auto:true,
    easing:'easeInOutCubic',
    useCSS:false,
    speed: 1000
});

An alternative I thought was to manually insert the background-image for each image. Example:

            <li><img src="images/banner_1.png" setimg="images/background_1jpg" /></li>
            <li><img src="images/banner_2.png" setimg="images/background_2jpg" /></li>

In that, I would run a jQuery that took the value setimg and applied as background in div class="banner-backg". But I don’t have much knowledge of how I can create this variable within the img.

Answer 1

In your HTML you put like this:

<div class="banner-backg">
<div class="banner-center">
    <ul class="bxslider">
        <li><img src="images/banner_1.png" /></li>
        <li><img src="images/banner_2.png" /></li>
        <li><img src="images/banner_3.png" /></li>
    </ul>
</div>

Consider that in the folder images have the files listed below and the library jquery with the version you implement .css():
background_1.jpg
background_2.jpg
background_3.jpg
And in the script you do something like this:

$('.bxslider').bxSlider({
    adaptiveHeight: true,
    mode: 'fade',
    auto:true,
    easing:'easeInOutCubic',
    useCSS:false,
    speed: 1000,
    onSlideNext: function($slideElement, oldIndex, newIndex) {
   // var tamanho = {'width':'100%', 'height':'auto'};
         $('.bxslider')
          .css({'background':'url(images/background_' + newIndex + '.jpg) center center no-repeat'})
        //  .css(tamanho)
        ;  
  }
});