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.
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
OTHER TIPS
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.