Usage

$(function() {
  /**
   * Horizontal
   */
  $('#scrollable-1').switchable({
    triggers: '•',
    putTriggers: 'insertBefore',
    panels: 'li',
    easing: 'ease-in-out',

    effect: 'scrollLeft',
    steps: 2,
    visible: 3, // important
    end2end: true,

    autoplay: true
  });

  /**
   * Vertical, Single-col
   */
  $('#scrollable-2').switchable({
    triggers: '•',
    putTriggers: 'insertBefore',
    panels: 'li',
    easing: 'ease-in-out',

    effect: 'scrollUp',
    steps: 2,
    visible: 2, // important

    autoplay: true
  });

  /**
   * Vertical, Multi-col
   */
  $('#scrollable-3').switchable({
    triggers: '•',
    putTriggers: 'insertBefore',
    panels: 'li',
    easing: 'ease-in-out',

    effect: 'scrollDown',
    steps: 2,
    visible: 2, // important
    end2end: true,
    groupSize: [440, 135], // required
    // 440 = 2 * ( 195[width] + 10[border] + 15[margin] )
    // 135 = 110[height] + 10[border] + 15[margin]

    autoplay: true
  });
});

/* Required Styles */

/**
 * Horizontal
 */
#scrollable-1 {
  position: relative;
  width: 650px;
  height: 125px;
  overflow: hidden;
}
#scrollable-1 li {
  float: left;
}

/**
 * Vertical, Single-col
 */
#scrollable-2 {
  position: relative;
  height: 260px;
  overflow: hidden;
}

/**
 * Vertical, Multi-col
 */
#scrollable-3 {
  position: relative;
  height: 125px;
  overflow: hidden;
}
#scrollable-3 li {
  float: left;
}