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

TJ Keel
  • 53
  • 1
  • 1
  • 7
  • Tried utilizing `css` animations ? See also http://stackoverflow.com/questions/30295085/how-can-i-make-an-image-carousel-with-only-css/ , http://stackoverflow.com/questions/29049761/changing-background-image-javascript/ – guest271314 May 22 '15 at 04:03
  • Thank. I've tried css animation but it didnt work. see edit^^^ – TJ Keel May 22 '15 at 05:00

3 Answers3

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/

guest271314
  • 1
  • 15
  • 104
  • 177
  • Thanks that works great! I'm having trouble changing the time that each image stays before transitioning? – TJ Keel May 22 '15 at 18:03
  • There isn't a pause between image transitioning. I've altered all the numbers, and still can't get it to change. Thanks – TJ Keel May 22 '15 at 18:10
  • I don't think the transition section is working. They're all set at 3000, but even when altering them nothing happens. – TJ Keel May 22 '15 at 18:31
  • @TJKeel `js` ,`css` without transition applied . Fade in , fade out effect between background image changes appear to still be applied , here , at http://jsfiddle.net/gkjL6mdj/. – guest271314 May 23 '15 at 01:34
  • 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. – TJ Keel May 23 '15 at 16:48
  • @TJKeel Is requirement to delay between fade in , fade out http://jsfiddle.net/gkjL6mdj/1/ ? Try adding `$(this).delay(3000, "fx")` before `.fadeTo(3000, 0,` within first `.fadeTo(3000, 1, "linear", function() {` callback ; adjust `delay` duration to expected "gap" ? – guest271314 May 23 '15 at 19:33
  • Everything in my site works great mobile except for this jquery slideshow. Is there a reason that jquery doesn't work well on mobiles? or anything that I can do to make this slide show work better on mobile.(The problem is that it doesn't fit the screen. the cycling and fading still works though.) – TJ Keel May 26 '15 at 21:37
  • @TJKeel Try adjusting `width`, `height` properties of `body` , `.slideshow` at `css` utilizing media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – guest271314 May 27 '15 at 14:04
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; }
}
Community
  • 1
  • 1
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
  • Thanks so much. I copied that over and I tried it in chrome but it didn't work. Still only showing the first image – TJ Keel May 22 '15 at 04:24
  • @TJKeel.. Check **[this](http://davidwalsh.name/multiple-background-css-animations)**, **[this](http://www.hongkiat.com/blog/css3-multiple-backgrounds/)** links – Guruprasad J Rao May 22 '15 at 04:34
  • can you provide a fiddle with all the image width and explain bit how you want it exactly?? – Guruprasad J Rao May 22 '15 at 05:00
  • 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 – TJ Keel May 22 '15 at 05:02
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);
mevsme
  • 441
  • 5
  • 15