Question

In the end this is gonna be a simple responsive slider. problems being the li’s wont stack horizontally. How can i maintain li’s that are 100% width of the current window and ul’s that overflow scrolls horizontally and not vertically? Is it possible to dot his only in css?

HERES A LIVE SAMPLE JSFIDDLES

html

 <article id="viewport">
  <ul id="slideshow">
    <li class="slide">
      <section id="towing">
        <div class="caption">
          <header>
            <h1>towing service</h1>
          </header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et nisi quam, eget cursus augue. Sed id felis non urna tristique lacinia vel quis neque. Vivamus nisl nibh, lacinia sed egestas et, euismod mollis sem. Maecenas non orci erat, a tincidunt magna.</p>
        </div>
      </section>
    </li>
    <li class="slide">
      <section id="scraping">
        <div class="caption">
          <header>
            <h1>metal scraping service</h1>
          </header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et nisi quam, eget cursus augue. Sed id felis non urna tristique lacinia vel quis neque. Vivamus nisl nibh, lacinia sed egestas et, euismod mollis sem. Maecenas non orci erat, a tincidunt magna.</p>
        </div>
      </section>
    </li>
    <li class="slide">
      <section>
        <div class="caption">
          <header>
            <h1>trade-in service</h1>
          </header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et nisi quam, eget cursus augue. Sed id felis non urna tristique lacinia vel quis neque. Vivamus nisl nibh, lacinia sed egestas et, euismod mollis sem. Maecenas non orci erat, a tincidunt magna.</p>
        </div>
      </section>
    </li>
  </ul>
</article>

CSS (.less symantics sorry)

    div#service{
    position:relative;
    height:800px;
    width: 100%;
    background:pink;}

article#viewport{
    position:relative;
    height:600px;
    width:100%;
    top:100px;
    background:@yellow;
    overflow:hidden; }
ul#slideshow{
    position:relative;
    overflow:auto;
    height:100%;
    display:inline-block; }

li.slide{
    position:relative;
    height:600px;
    width: 100%;
    zoom: 1;
    display:inline-block;
    background:#ccc;
}
div.caption{width:300px; background:#555;text-align:right;float:right;}

​

Ps. Why is it when I set the .captions to position absolute; it breaks this whole interaction?

Answer 1

Here’s the thing about your “slideshow” – the ul will default to width: auto, which means it expands to the width of its parent (since it’s a block element). It will not expand its width with its content, like it will with its height.

So, what you need is a viewport div – a div with width: 100% and overflow: auto. This will allow for scrolling, and hiding of extra slides. Then, you need a div that has width of (x * 100)%, where x is the number of slides you have. This will allow for all the space you need for the slides, layed out horizontally.

Also, your slides will need width equal to (100 / x)% (round down), where x, again, is the number of slides you have. This seems counter-intuitive, but if you think about it, they will become 1 xth of the size of x times 100% of the window – which means they’ll be 100% the size of the window.

Lastly, you’ll need to use float: left; instead of display: inline-block. I’m not sure exactly why this is, but it’s the only way I could get it to work. Which is okay by me because I kinda hate inline-block.

Here’s a working Fiddle

I don’t believe there’s a way to do this with pure CSS and without prior knowledge of how many slides there are.