cube slide

by rupesx

HTML

<body>
  <div id="wrapper">
    <div class="view">
      <div class="slide"><img src="http://www.cssscript.com/demo/fullscreen-3d-cube-slider-with-pure-css-css3/images/slide3.jpg" alt=""> </div>
      <div class="slide"><img src="http://www.cssscript.com/demo/fullscreen-3d-cube-slider-with-pure-css-css3/images/slide2.jpg" alt=""></div>
      <div class="slide"><img src="http://www.cssscript.com/demo/fullscreen-3d-cube-slider-with-pure-css-css3/images/slide1.jpg" alt=""></div>
      <div class="slide"><img src="http://www.cssscript.com/demo/fullscreen-3d-cube-slider-with-pure-css-css3/images/slide4.jpg" alt=""></div>
    </div>
    
    
  </div>
  <a href=""onclick='prev()'>prev</a>
    <a href="" onclick='next()'>next</a>
</body>

CSS

#wrapper{
  width: 300px;
  height: 300px;
  margin: 0 auto 20px;
  overflow: hidden;
  overflow-x: auto;
}

#wrapper .view{
  width: 2000em;
}

.slide img{
  max-width: 100%;
  height: 295px;
}

.slide{
  display: inline-block;
  float: left;
  transform: translate3d(0, 0, 15px);
}

JavaScript

var slideWidth = $('#wrapper').width();
		slideHeight = $('#wrapper').height();
    
   $('.slide img').css({
   	'width': slideWidth + 'px'
  //  'width': slideHeight + 'px'
   }); 
  
  function prev() {
  	alert(1);
  }