CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Greg
Greg

Reputation: 3063

DIV - Alternate background images

Instead of implementing a slider plugin, I'd like to use CSS/jquery to alternate background images of a DIV (fadein/fadeout or slide effect). Currently my code is as below:

HTML

<div class="block backpic">
</div>

CSS

.block {

    display: block;
        margin-right: auto;
    margin-left: auto;
    clear: both;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    overflow: hidden;
}


.backpic {
    height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

What should I do to alternate picture1 with a second picture? Many thanks for your help

Upvotes: 1

Views: 4215

Answers (3)

shennan
shennan

Reputation: 11656

Use jQuery to fade the element out, than change it's background-image property, then fade back in again:

$('.block').fadeOut(300, function(){

  $(this).css('background-image', 'url(path/to/other/image.jpg)')

  $(this).fadeIn(300);

});

If you're wanting a slideshow-like cycling of the animation, use a JavaScript setInterval method to have the code repeat itself after a certain number of milliseconds:

var images = [

  'path/to/image1.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg'

];

var index = 0;

setInterval(change_up, 1000);

function change_up(){

  index = (index + 1 < images.length) ? index + 1 : 0;

  $('.block').fadeOut(300, function(){

    $(this).css('background-image', 'url('+ images[index] + ')')

    $(this).fadeIn(300);

  });
}

Here's an example

Upvotes: 7

Brandon Nozaki Miller
Brandon Nozaki Miller

Reputation: 131

have a core slider class

.slider{
   opacity:1
   -webkit-transition:opacity 500ms;
   -moz-transition:opacity 500ms;
   -ms-transition:opacity 500ms;
   transition:opacity 500ms;
}

.hideSlide{
   opacity:0
}

This will cause the fade of opacity. Then you can change your opacity with the hide slide class and when it is transparent change the background image. Then remove the hide slide class and it will fade back in.

Alternatively you could have a bunh of divs laid on top of one another fading out at increasing lengths 500ms 1000ms, 1500ms etc. to expose them to the viewer.

Upvotes: 0

Anobik
Anobik

Reputation: 4899

try using even and odd selectors

    .block:nth-child(odd) {
background-image:
 height: 638px;
    background-image: url(../images/picture1.jpg);
    background-size: cover;
}

.block:nth-child(even) {
background-image:
 height: 638px;
    background-image: url(../images/pictureNew.jpg);
    background-size: cover;
}

Upvotes: 0

Related Questions