Sliding/fading background-image

Question

I have a background image on a container on all pages of a site, but the home page has two images and they would like these images to scroll/fade.

I have used the answer from this post here: CSS background-image slideshow and produced the following:

<script>
var images=new Array('imageurl1','imageurl2');
var nextimage=0;
doSlideshow();

function doSlideshow(){
    if(nextimage>=images.length){nextimage=0;}
    $('.hometopcontentarea')
    .css('background','url("'+images[nextimage++]+'") no-repeat center')
    .fadeIn(500,function(){
        setTimeout(doSlideshow,1000);
    });
}
</script>
        <div class="hometopcontentarea col-xs-12 col-sm-12" style="height: 624px; margin-bottom: 20px;">

The image paths are correct when looking at the source but unfortuately nothing is happening and the images aren't loading.

What could I be doing wrong?

Thanks in advance.

Not for me i'm afraid, it's not applying any kind of background property to the hometopcontentarea div — Adrian, Apr 21 '16 at 12:34
OK I got this working simply by changing $ to jQuery but the `.fadeIn("slow",function(){` seems to be getting ignored, regardless if I put `slow` or a number `500` or `3000` for example — Adrian, Apr 21 '16 at 13:03
look at the link in my first comment, the code works. there has to be something else you're missing. loading jquery could be one thing.. — Uzi, Apr 21 '16 at 13:09
Yes it's now working thanks, and the setTimeout duration is also working fine when changed, but the fadeIn duration is being ignored. — Adrian, Apr 21 '16 at 13:10

score 0 · Accepted Answer · answered Apr 21 '16 at 13:25

i think you're looking for this:

var images = [
      "http://www.independent.ie/incoming/article29989530.ece/ALTERNATES/h342/Li%20Ann%20Smal%20-App.jpg",
      "http://im.rediff.com/news/2015/dec/24tpoty20.jpg"
    ]
    var nextimage = 0;
    function doSlideshow(){
        if(nextimage>=images.length){nextimage=0;}
        $('.hometopcontentarea')
        .css({
          background: 'url('+ images[nextimage++]+') no-repeat center',
          opacity:0,
        })
        .fadeTo('slow',1);
      setTimeout(doSlideshow,4000);

    }

    doSlideshow();

(demo)

the problem with the fadeIn function is that you can't fade in 1 element 2 times. once it's already visible, you need to reset the opacity to allow a second fade-in.

excellent, thank you... i dont suppose there is a way of fading out first image back to 0 whilst the second image is fading in? Just to make it a bit more seamless? — Adrian, Apr 21 '16 at 13:39
you could stack 2 elements and show current image on top and previous/next image behind it so the transition will be smoother, without a white screen. or you could increase the opacity from 0 to 0.5 and that'll too make it look better. — Uzi, Apr 21 '16 at 16:26

Sliding/fading background-image

1 Answers1