Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript white area at end of anything slider sequence

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #38083
    rdmckelvey
    Member

    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"
    })
    });
    #102901
    rdmckelvey
    Member

    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.

    #102911
    rdmckelvey
    Member

    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!

    #102912
    TheDoc
    Member

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

    #102917
    Mottie
    Member

    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.

    #102923
    rdmckelvey
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.