CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackground
TJ Keel
TJ Keel

Reputation: 53

Background slideshow- make pause between fadein/out?

I have a working background slideshow, but the images immidiately begin to fadeout after the fadein effect is complete. I want there to be a gap inbetween pictures where they are not fading in or out. Here's my code:

The html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="slideshow">
<div id="slideshow"></div>
</div>

The css:

.slideshow {
background: #000;
display:block;
width:inherit;
height:inherit;
}
#slideshow {
width: 100%;
height: 100%;
display: block;
opacity: 0.0;
background-color: #000;
background-image: url("http://lorempixel.com/400/400/cats/?1"), 
url("http://lorempixel.com/400/400/animals/?2"), 
url("http://lorempixel.com/400/400/nature/?3"), 
url("http://lorempixel.com/400/400/technics/?4"), 
url("http://lorempixel.com/400/400/city/?5");
background-size: cover, 0px, 0px, 0px;
-webkit-transition: background-image 3000ms linear;
-moz-transition: background-image 3000ms linear;
-ms-transition: background-image 3000ms linear;
-o-transition: background-image 3000ms linear;
transition: background-image 3000ms linear;
}

Here's my js:

$(function() {
$.fx.interval = -6000;
(function cycleBgImage(elem, bgimg) {
elem.css("backgroundImage", bgimg).delay(1000, "fx")
.fadeTo(3000, 1, "linear", function() {
$(this).fadeTo(3000, 0, "linear", function() {
var img = $(this).css("backgroundImage").split(","),
bgimg = img.concat(img[0]).splice(1).join(",");
cycleBgImage(elem, bgimg);
    });
  });
}($("#slideshow")));
});

Any help with making a stoptime between images would be appreciated. Thanks

Upvotes: 2

Views: 57

Answers (1)

d3xt3r
d3xt3r

Reputation: 130

Change your delay : elem.css("backgroundImage", bgimg).delay(1000, "fx")

Example; change 1000 in 3000 then the image will stay for 3 seconds

Upvotes: 2

Related Questions