Flexslider 100% width creates horizontal scroll-bar

Question

http://dl.dropbox.com/u/29703851/js/demo/index.html

This is demonstration.

I want to use flexslider with 100% width, but I get that strange additional width and horizontal scroll-bar when mouse cursor is outside of flexslider.

When I go over flexslider, horizontal scroll disappears. Any advices?

I use demo code, no css changes, no js changed. Just deleted all divs around, and left only one div with class flexslider.

Is there a proper way for 100% width?

Bubbly

Answer 1

problem fixed for me with overflow: hidden; in .flexslider

Bubbly

This introduces another big problem - missing pager dots. – Imprimatur

Answer 2

That will also hide the "pager" dots if you do it that way. I solved it by adding the overflow:hidden; to the parent container. I'm working with a responsive layout, so parent is setting width as well.

Larocca

I think this is the better answer, works well - the other one does hide the dots. – Ianiana

Hide the pager dots only if you're showing the dots outside of the container, with negative margins. – Whimwham

This is the answer. Good catch. – Carlow