Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

horizontally scrollable one line gallery with css

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

like image 833
Boti Avatar asked Mar 21 '14 19:03

Boti


People also ask

How do I scroll horizontally in CSS?

To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.

How do you make a div scrollable horizontally CSS?

Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.

How do I add a horizontal scroll bar?

Basic Horizontal Scroll Box To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll; . This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide.


2 Answers

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.

like image 144
notchris Avatar answered Sep 27 '22 22:09

notchris


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

like image 39
newTag Avatar answered Sep 27 '22 22:09

newTag