Slider Test

by e_kurbanov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="slider-wrapper">
  <div class="slides-container">
    <img class="slide" src="https://goo.gl/RpPksw" alt="">
    <img class="slide" src="https://goo.gl/zB1HsZ" alt="">
    <img class="slide" src="https://goo.gl/D2FCiV" alt="">
  </div>
</div><br>
<button id="prev">PREV</button>
<button id="next">NEXT</button>

CSS

body * {
  box-sizing: border-box;
}
.slide{
  display: inline-block;
  float: left;
}
.slider-wrapper{
  overflow: hidden;
}

JavaScript

$(document).ready(function(){
	var slideHeight = $('.slide').height();
  var slideWidth = $('.slide').width()
  var next = $('#next'); 
  var prev = $('#prev'); 
  
  $('.slides-container').height(slideHeight);
  $('.slides-container').width(slideWidth * $('.slide').length);
  $('.slider-wrapper').width(slideWidth);
  
  var nextSlide = function(){
  		$('.slide')[0].animate({
      		left: slideWidth + 'px'
      })
  }
  next.bind('click', function(){
  		nextSlide();
  })
  
})