Как сделать самый простой слайдер на javascript или jquery?

1
2
3
4
5
6
7

<div class="slider">
  <img src="img1.jpg">
  <img src="img2.jpg">
</div>

<button class="prev">Влево</button>
<button class="next">Вправо</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  width: 500px;
  height: 300px;
  float: left;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$(document).ready(function() {
  var slideCount = $('.slider img').length;
  var slideWidth = $('.slider img').width();
  var slideHeight = $('.slider img').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('.slider').css({ width: slideWidth, height: slideHeight });

  $('.slider img:last-child').prependTo('.slider');

  function moveLeft() {
    $('.slider img:last-child').animate({ marginLeft: -slideWidth }, 200, function() {
      $('.slider img:last-child').prependTo('.slider');
      $('.slider img:first-child').css('margin-left', 0);
    });
  };

  function moveRight() {
    $('.slider img:first-child').animate({ marginLeft: -slideWidth }, 200, function() {
      $('.slider img:first-child').appendTo('.slider');
      $('.slider img:first-child').css('margin-left', 0);
    });
  };

  $('.prev').click(function() {
    moveLeft();
  });

  $('.next').click(function() {
    moveRight();
  });
});