horizontally scrollable one line gallery with css

html css slim-lang
Boti picture Boti · Mar 21, 2014 · Viewed 10.3k times · Source

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.

enter image description here

Answer

notchris picture notchris · Mar 21, 2014

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.

Related questions

Ruby Slim - How do you define an element's class with a rails helper or variable?

In rails slim (http://slim-lang.com/) the syntax for defining a new div with a class name "sample" is the following: .sample = "Content goes here" this will create: <div class="sample"> Content goes here </div> I …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More