Usage

$(function() {
  $('#slide').switchable({
    triggers: '•',
    putTriggers: 'insertBefore',
    effect: 'fade',
    /* fade effect only supports steps == 1 */
    // steps: 1,
    easing: 'ease-in-out',
    loop: false,
    prev: '#prev',
    next: $('#next'),
    onSwitch: function(event, currentIndex) {
      var api = this;
      api.prevBtn.toggleClass('disabled', currentIndex === 0);
      api.nextBtn.toggleClass('disabled', currentIndex === api.length - 1);
    }
  });
});

/* Required Styles */
#slide {
  position: relative;
  width: 550px;
  height: 310px;
  overflow: hidden;
}
#slide img {
  position: absolute;
}