Gallery with multiple scrollables

Here is another innovative way of scrolling images. Click on the images to see it in action. Use the left/right keys to navigate between images within a single scrollable:

standalone demo

HTML coding

Here is a setup for a single scrollable. You can have as many of these on your page as you want.

  <!-- scroll #1 -->
  <div class="scroll">
    <div class="pics">
      <div style="background-image:url(my-image-01.jpg)"></div>
      <div style="background-image:url(my-image-02.jpg)"></div>
      <div style="background-image:url(my-image-03.jpg)"></div>
    </div>
  </div>

HTML

CSS coding

Here is our CSS code. Nothing really special here. Scrollables are placed side by side with the float: left setting. We have a separate CSS block for the activated scrollable item that can be styled.

    /* root element for single scroll */
    .scroll {
    position:relative;
    overflow:hidden;
    width: 348px;
    height: 266px;
    float:left;
    margin-left: 2px;
    margin-bottom: 2px;
    }
 
    /* root element for the scroll pics */
    .scroll .pics {
    width:20000em;
    position:absolute;
    clear:both;
    }
 
    /* single scroll item */
    .pics div {
    float:left;
    cursor:pointer;
    width:400px !important;
    height:300px;
    margin:0px;
    }
 
    /* possible settings for the active scroll */
    .scroll.active {
    }

CSS

JavaScript coding

Here we enable our scrollables. All scrollables have the circular configuration option set to true so that there is no beginning or end. We also add a custom click handler which seeks the scrollable forward using the next() method of the Scrollable API.

      // enable circular scrollables with a click handler
      $(".scroll").scrollable({ circular: true }).click(function() {
      $(this).data("scrollable").next();
      });

JavaScript