<div class="slider">
  <div class="banner"><span>Slider</span></div><!--end banner-->
  <div class="btnLeft"></div><!--end btnLeft-->
  <div class="btnRight"></div><!--end btnRight-->
  <div class="info"></div><!--end info-->
  <div class="hidden images">
  <img src="http://www.matejmichalik.com/black-and-white-photography/galleries/post-427/full/Black-and-white-photo-Tanah-lot-bali.jpg">
  <img src="http://cdn.digital-photo-secrets.com/images/black-white-dendelion-large.jpg">
  <img src="http://picturescollections.com/wp-content/uploads/2012/04/Black_And_White_Pictures.jpg">
</div><!--end hidden-->
</div><!--end slider-->

body {
  background: #34495e;
  font-family:verdana;
}

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);

.slider {
  background:white;
  margin:50px auto;
  height:350px;
  width:600px;
  border:10px solid white;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-shadow:0px 5px 10px 1px rgba(0, 0, 0, .6);
  box-shadow:0px 2px 5px 1px rgba(0, 0, 0, .6);
}

.slider .banner {
  background:#66CCCC;
  position:absolute;
  margin-top:23px;
  margin-left:-15px;
  height:40px;
  width:115px;
  transform:rotate(-45deg);
  -ms-transform:rotate(-45deg); /* IE 9 */
  -webkit-transform:rotate(-45deg); /* Safari and Chrome */
}

.slider .banner span {
  color:white;
  position:absolute;
  font-size:30px;
  margin-left:17px;
  margin-top:3px;
  font-family: 'Roboto Condensed', sans-serif;
}

.slider .banner:before {
  content:"";
  position:absolute;
  width:0; 
	height:0; 
	border-top:40px solid transparent;
	border-left:40px solid #66CCCC;
  margin-left:114px;
}

.slider .banner:after {
      content:"";
      position:absolute;
      width:0; 
	    height:0;
      margin-left:-39px;
	    border-top:40px solid transparent;
	    border-right:40px solid #66CCCC;
}

.slider:before {
  content:"";
  position:absolute;
  background:rgba(0,0,0,.6);
  height:150px;
  width:285px;
  margin-top:216px;
  margin-left:-6px;
  transform: skewY(-5deg);
  -ms-transform: skewY(-5deg); /* IE 9 */
  -webkit-transform: skewY(-5deg); /* Safari and Chrome */
  z-index:-1;
  filter:blur(7px);
  -webkit-filter:blur(7px);
  -moz-filter:blur(7px);
  -o-filter:blur(7px);
  -ms-filter:blur(7px);
}

.slider:after {
  content:"";
  position:absolute;
  z-index:-5; /* broken */
  background:rgba(0,0,0,.6);
  height:150px;
  width:285px;
  margin-top:216px;
  margin-left:320px;
  transform:skewY(5deg);
  -ms-transform:skewY(5deg); /* IE 9 */
  -webkit-transform:skewY(5deg); /* Safari and Chrome */
  filter:blur(7px);
  -webkit-filter:blur(7px);
  -moz-filter:blur(7px);
  -o-filter:blur(7px);
  -ms-filter:blur(7px);
}

.slider .btnLeft {
  position:absolute;
  margin-top:165px;
	border-top:15px solid transparent;
	border-bottom:15px solid transparent; 
	border-right:15px solid white;
  opacity:.3;
  margin-left:20px;
  transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
}

.slider .btnLeft:before {
  content:"";
  position:absolute;
  background:rgba(200,200,200,.4);
  height:50px;
  width:50px;
  -webkit-border-radius:100%;
  border-radius:100%;
  margin-left:-15px;
  margin-top:-25px;
  transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
}

.slider .btnLeft:hover {
  opacity:1;
  cursor:pointer;
}

.slider .btnLeft:hover:before{
  -webkit-box-shadow:0px 0px 10px 1px rgba(0, 0, 0, .6);
  box-shadow:0px 0px 10px 1px rgba(0, 0, 0, .4);
}

.slider .btnRight {
  position:absolute;
  margin-top:165px;
	border-top:15px solid transparent;
	border-bottom:15px solid transparent;
	border-left:15px solid white;
  opacity:.5;
  margin-left:565px;
  transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
}

.slider .btnRight:before {
  content:"";
  position:absolute;
  background:rgba(200,200,200,.4);
  height:50px;
  width:50px;
  -webkit-border-radius:100%;
  border-radius:100%;
  margin-left:-35px;
  margin-top:-25px;
  transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -webkit-transition:all .25s ease-in-out;
}

.slider .btnRight:hover {
  opacity:1;
  cursor:pointer;
}

.slider .btnRight:hover:before{
  -webkit-box-shadow:0px 0px 10px 1px rgba(0, 0, 0, .6);
  box-shadow:0px 0px 10px 1px rgba(0, 0, 0, .4);
}

.hidden {
  display: none;
}

;(function() {

    var slider = function() {
      
      var backImg = [];
      backImg[0] = "http://www.matejmichalik.com/black-and-white-photography/galleries/post-427/full/Black-and-white-photo-Tanah-lot-bali.jpg";
      backImg[1] = "http://cdn.digital-photo-secrets.com/images/black-white-dendelion-large.jpg";
      backImg[2] = "http://picturescollections.com/wp-content/uploads/2012/04/Black_And_White_Pictures.jpg";
      
      var i = 0;
      var x = (backImg.length) - 1;
      var int = 3500;
      
      interval = setInterval(showNext, int); // hoist?
      
      var elements = {
        slider: document.querySelector('.slider'),
        btn: { 
          left: document.querySelector('.btnLeft'),
          right: document.querySelector('.btnRight')
        }
      }
      
      var startInterval = function() {
         interval = setInterval(showNext, int);
      }
      
      var stopInterval = function() {
        clearInterval(interval);
      }
      
      var attachEvents = function() {
        elements.btn.left.onclick = function() { showPrevious(); };
        elements.btn.right.onclick = function() {  showNext(); };
        elements.slider.addEventListener("mouseenter", stopInterval);
        elements.slider.addEventListener("mouseleave", startInterval);
      };
      
      var changeImg = function() {
        elements.slider.style.backgroundImage = 'url(' + backImg[i] + ')';
      }
      
      var initialize = (function() {
        attachEvents();
        changeImg(i);
      })();

      var showPrevious = function() {
        (i <= 0) ? i = 3 : i--;
        changeImg(i);
      };

      var showNext = function() {
        (i >= x) ? i = 0 : i++;
        changeImg(i);
      };

    };

    slider();
  
})();