slideshow.css

slideshow.scss

/**
 * @example
 *  div.slideshow
 *    div first pane
 *    div.active active pane
 *    div last pane
 */
.slideshow {
  position: relative;
  overflow: hidden;
  
  // all slideshow panes
  > div { 
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .5s;
    
    // place left at the slideshow
    // they become hidden because of the overflow on the container
    // this can be changed to any thinkable animation, as long as it gets
    // visible when active
    opacity: 0;
    transform: translate(-100%, 0);
    
    // the first pane sets the height of the container
    // by setting it's position to relative
    &:first-child {
      position: relative; 
    }
    
    // the active gets placed in view
    &.active {
      transform: translate(0, 0);
      opacity: 1;
    }
    
    // all items next to the active pane, are placed right
    &.active ~ div {
      transform: translate(100%, 0);
    }
  }
}