3

I've placed three background images in a div. I'm trying to make all three of them cycle through on a timer that fades in and out. I've actually found similar quesitons on here, but I cannot get them to work. Anyway, here's the relevant code:

HTML

<div id="slideshow"> </div>

CSS

#slideshow{ position:relative; top:0; width:100%; height:635px; background: url("car4.jpg"), url("city.jpg"), url("host3.jpg"); background-repeat:no-repeat; background-size:100%; }

I'm hoping to do this in CSS, but I'm guessing it requires JQUERY; which I don't have much experience in. But that's OK.

I'd really appreciate any help. Let me know if I can give you any more information. Thank you.

*** I've tried css animations but I didn't get the results. Here's what I changed it to:

#slideshow{ position:relative; top:0; width:100%; height:635px; background:url("car4.jpg"); background-repeat:no-repeat; background-size:100%; animation-name: one; animation-duration: 4s; } @keyframes one { from {background: url("car4.jpg");} to {background: url("city.jpg");} }

This looks correct, but it still only showing the original image "car4.jpg" Thanks

Improve this question
2

3 Answers 3

Reset to default
4

Try creating array from css background-image value , fading in , fading out first background image ; removing faded out background image from array , placing removed background image at last index of array ; resetting background image value to array joined by comma; fading in , fading out next , now first indexed background image ; cycling through fading in , fading out all background images ; recursively calling function , to attempt to create displayed effect of an "infinite" fade in , fade out "slideshow" 

$(function() { // set `$.fx.interval` at `0` $.fx.interval = 0; (function cycleBgImage(elem, bgimg) { // `elem`:`#slideshow` // set, reset, delay to `1000` after background image reset elem.css("backgroundImage", bgimg) // fade in background image .fadeTo(3000, 1, "linear", function() { // set `delay` before fadeing out image // fade in background image $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() { // split background image string at comma , creating array var img = $(this).css("backgroundImage").split(","), // concat first background image to `img` array, // remove first background image from `img` array bgimg = img.concat(img[0]).splice(1).join(","); // recursively call `cycleBgImage` cycleBgImage(elem, bgimg); }); }); }($("#slideshow"))); });
body { width: 400px; height: 400px; } /* set `#slideshow` parent background color */ .slideshow { background: #000; display:block; width:inherit; height:inherit; } #slideshow { width: 100%; height: 100%; display: block; opacity: 0.0; background-color: #000; /* set background images as `url(/path/to/image)` here, separated by commas */ 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; /* set transtitions at 3000ms -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; */ }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="slideshow"> <div id="slideshow"></div> </div>

jsfiddle http://jsfiddle.net/gkjL6mdj/15/

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks that works great! I'm having trouble changing the time that each image stays before transitioning?
There isn't a pause between image transitioning. I've altered all the numbers, and still can't get it to change. Thanks
I don't think the transition section is working. They're all set at 3000, but even when altering them nothing happens.
@TJKeel js ,css without transition applied . Fade in , fade out effect between background image changes appear to still be applied , here , at jsfiddle.net/gkjL6mdj.
I dont understand. The fade out effect is happening immidiately after the fade in effect is complete. I'm trying to make a gap inbetween fadein/out where the picture is just there without any movement.
|
0

From the answer here and suggestion from @guest271314 try defining CSS 3 key frames for animation:

#slideshow{ position:relative; top:0; width:100%; height:635px; background: url("car4.jpg"), url("city.jpg"), url("host3.jpg"); background-repeat:no-repeat; background-size:100%; -moz-animation: swim 2s linear 0s infinite; -webkit-animation: swim 2s linear 0s infinite; animation: swim 2s linear 0s infinite; } @-moz-keyframes swim { from { background-position: 200% 0, 0 0; } to { background-position: -100% 0, 0 0; } } @-webkit-keyframes swim { from { background-position: 200% 0, 0 0; } to { background-position: -100% 0, 0 0; } } @keyframes swim { from { background-position: 200% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
Improve this answer

4 Comments

Thanks so much. I copied that over and I tried it in chrome but it didn't work. Still only showing the first image
@TJKeel.. Check this, this links
can you provide a fiddle with all the image width and explain bit how you want it exactly??
I just edited the original post to show how I've made the css animations, but it still isn't working. The goal is to have 3 images at full width cycle through on a timer. css animations look like a great idea, but I can't get it to work
0

CSS

#background-slideshow { transition: background 1.5s ease; background-position: center top, center top, center top; background-size: cover, cover, cover; background-repeat: no-repeat, no-repeat, no-repeat; background-image: url(img/background-1.jpg), url(img/background-2.jpg), url(img/background-3.jpg); }

JS

var i = 1; setInterval(function() { e = document.getElementById('background-slideshow'); switch (i) { case 0: e.style.backgroundPosition = 'center top, center top, center top'; break; case 1: e.style.backgroundPosition = window.innerWidth + 'px top, center top, center top'; break; case 2: e.style.backgroundPosition = window.innerWidth + 'px top, ' + window.innerWidth + 'px top, center top'; break; } i++; if (i > 2) i = 0; }, 3000);
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.