Treehouse: Grow your CSS skills. Land your dream job.

white area at end of anything slider sequence

  • # May 16, 2012 at 9:49 am

    I’m using the anything slider and it worked fine with images in the foreground (i.e. if placed in the html), but when I have the images included as background images via CSS (so I can have content on top of the images), I’m getting an “extra” white slide at the end of the sequence (i.e. when it loops back to slide 1). Anyone had this happen before? Any ideas?

    The problem can be seen here. The code couldn’t be simpler:

    **HTML**






    **CSS**

    #now_one {
    background-image: url(../img/slide_panels/now_one.jpg);
    }

    #spring_awakening {
    background-image: url(../img/slide_panels/spring_awakening.jpg);
    }

    #collage1 {
    background-image: url(../img/slide_panels/collage1.jpg);
    }

    #that_ticket1 {
    background-image: url(../img/slide_panels/that_ticket1.jpg);
    }

    #collage2 {
    background-image: url(../img/slide_panels/collage2.jpg);
    }

    #that_ticket2 {
    background-image: url(../img/slide_panels/that_ticket2.jpg);
    }

    #collage3 {
    background-image: url(../img/slide_panels/collage3.jpg);
    }

    #slider li {
    position: relative; /*make panel parent of buttons*/
    }

    **JS**

    $(function(){
    $('#slider').anythingSlider({
    buildStartStop: false,
    autoPlay: true,
    buildArrows: false,
    forwardText: "»",
    backText: "«",
    animationTime: 1100,
    delay: 5000,
    easing: "swing"
    })
    });
    # May 16, 2012 at 1:19 pm

    One note on the original post… I’ve determined that if I add a foregrounded image as the first slide (with all others in the background) the “wrap-around” works fine. This doesn’t surprise me, since I was pretty sure the issue was that the background image was not being loaded until the slide motion completed.

    This is a work-around I can live with in the short term, but I don’t want to be stuck with this limitation any longer than I have to!

    Thanks for any help/advice.

    # May 16, 2012 at 2:36 pm

    I had to move the buggy version of the code to a different url since I’m moving forward. If you want to see the live version of the problem please go here instead of the previous link. Sorry for the confusion!

    # May 16, 2012 at 2:39 pm

    I’m not seeing any white space, what browser are you viewing it in?

    # May 16, 2012 at 4:12 pm

    I believe the problem is because AnythingSlider removes the ID from cloned slides. So if your background image is set using an ID, the cloned panels will be blank. Just switch the ID’s to classes to fix it.

    # May 16, 2012 at 5:19 pm

    Thanks Mottie! Changing to classes did the trick. An easy fix.

    I really appreciate the help.

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

You must be logged in to reply to this topic.