Change div background-image according to banner image

Question

Change div background-image according to banner image

Navigation

#1 by (0 votes)

0

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

For the slider I'm using link

: Slider HTML

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

One alternative I thought was to insert background-image manually 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 this, I would execute a jQuery that takes the value setimg and applies as a background to div class="banner-backg" . But I'm not really aware of how I can create this variable within img .

html jquery css background bxslider

asked by anonymous 24.07.2015 / 15:18

1 answer

What is the behavior when MongoDB reaches the defined maximum value of $ inc? The implementation of BeanValidation is not working

score 0 · Accepted Answer

In your HTML you put it 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 the images folder to have the files listed below and the jquery library with the version that implements .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)
        ;  
  }
});