Demo 1: Default slideshow

slidesContainer = document.querySelector('.slides');
slideshow = new Slideshow(slidesContainer);
document.querySelector('#next').addEventListener('click', function() {
  slideshow.goToNext();
});
document.querySelector('#prev').addEventListener('click', function() {
  slideshow.goToPrev();
});

Demo 2: Fade in/out slideshow

// custom effect
Slideshow.registerEffect('awesome-fade', {
  before: function(slideState, slideElement) {
    if (slideState === 0) {
      // this is the currently visible slide. we want it to
      // be totally opaque before animating it to totally transparent.
      slideElement.style.opacity = 1;
    } else {
      // this is the slide that will become opaque, but first
      // it should be transparent.
      slideElement.style.opacity = 0;
    }
  },
  progress: function(slideState, progress, slideElement) {
    // get the absolute value of the property, because we are
    // not interested in left/right
    progress = Math.abs(progress);
    // the slide that was visible at first should become
    // more and more transparent as we progress further.
    // the other element should get more opaque.
    if (slideState === 0) {
      slideElement.style.opacity = 1 - progress;
    } else {
      slideElement.style.opacity = progress;
    }
  },
  after: function(slideState, slideElement) {
    // the new slide should be on top for save image (etc.) to work
    if (slideState === 0) {
      // this is the previous slide, so send down
      slideElement.style.zIndex = 0
    } else {
      // this is the next slide so send to top
      slideElement.style.zIndex = 1
    }
  }
});

slidesContainer = document.querySelector('.slides');
slideshow = new Slideshow(slidesContainer, {
  animationDuration: 600,
  effect: 'awesome-fade'
});
document.querySelector('#next').addEventListener('click', function() {
  slideshow.goToNext();
});
document.querySelector('#prev').addEventListener('click', function() {
  slideshow.goToPrev();
});