Search code examples
jqueryanythingslider

AnythingSlider width with page scrollbar glitch?

I am using anythingslider with width set to 100% so that it fills the page, and it works fine except when the page uses a scrollbar, then the slider is 100% + width of scroll bar. Is there something I can do to fix this?

Solution

  • Instead of setting the width of the slider to 100%. Make its parent to 100% (also set a height), then set the expand option to true (demo):

    HTML

    <div id="wrapper">
    <ul id="slider">
        <li><img src="http://placekitten.com/300/200" alt="" /></li>
        <li><img src="http://placehold.it/300x200" alt="" /></li>
        <li><img src="http://ipsumimage.appspot.com/300x200.png" alt="" /></li>
        <li><img src="http://dummyimage.com/300x200/000/fff.jpg" alt="" /></li>
    </ul>
</div>

    CSS

    #wrapper {
    height: 500px;
}

    Script

    $('#slider').anythingSlider({
    // If true, the entire slider will expand to fit the parent element
    expand: true
});​