Grow your CSS skills. Land your dream job.

All-CSS Infinite Scrolling Slideshow

  • # December 29, 2012 at 5:03 pm

    I was using Chris’s All-CSS Infinite Scrolling Slideshow, and wanted to change the image that was displayed, but whenever i change the background of the div, even with an image of the same exact size, it doesnt work. Any reason why?
    Heres the link to the example,(I used the non-GPU one)[Infinite All-CSS Scrolling Slideshow](http://css-tricks.com/infinite-all-css-scrolling-slideshow/ “Infinite All-CSS Scrolling Slideshow”)

    And here’s my code:
    HTML:

    CSS:

    #tech-slideshow {
    height: 200px;
    position: relative;
    overflow: hidden;
    }
    #tech-slideshow > div {
    height: 200px;
    width: 2526px;
    background: url(‘collage.jpg’);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;

    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    -webkit-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;

    -webkit-animation: moveSlideshow 60s linear infinite;
    -moz-animation: moveSlideshow 60s linear infinite;

    }

    @-webkit-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -1684px; }
    }
    @-moz-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -1684px; }
    }

    # January 11, 2013 at 11:39 am

    I’ve been working with this same code on a fan site for a tv show. I got mine working! Try changing all your moveSlideshows to simply slideshow. I know his jsFiddle uses moveSlideshow but I couldn’t get that to work. It would help to be able to see all your css because it could be something simple as a bad label.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".