horizontally scrollable one line gallery with css

Question

I would like a horizontally scrollable gallery like the one on the image.

My current markup is this (it is slim.):

.col-xs-12
  .row-fluid.clearfix
    ul.ace-thumbnails
      - @equipment_uses.each do |gear|
        = content_tag_for(:li, gear) do
          a.cboxElement data-rel="colorbox" href="#" title=("Photo Title")
            = image_tag gear.image, size: '80x80', alt: "150x150", class: 'img-thumbnail thumbnail'

If I set the 'overflow-x: scroll' fro the .col-xs-12 div and 'width:10000px' for the '.row-fluid.clearfix' div then it is working but the horizontal div too long. I would like to outspread the width of the .row-fluid.clearfix to be to total width of the images.

Solution 1

This is not exactly an answer, but this page has some great tutorials on exactly this topic, covering a few different versions. I would have left a comment rather than an answer but my reputation has prevented this.

Solution 2

Basic horizontally scrolling list of images using HTML & CSS:

HTML:

<ul class="images">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul> 

CSS:

 ul.images {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    width: 900px;
    overflow-x: auto;
    background-color: #ddd;
  }
  ul.images li {
    display: inline;
    width: 150px;
    height: 150px;
  }

The trick in the CSS is to set the lis to display:inline, so they are treated as characters and placed next to each other, and set white-space:nowrap on the ul so that no line breaking is done.

The scrolling is then simply overflow-x:auto and the rest is obvious. Adding prev/next buttons could be done with position:absolute, or with float:left, or whatever other method you fancy.

See demo