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

Пользователь

от kurt , в категории: JavaScript , 20 дней назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от delphine_bartoletti , 19 дней назад

@kurt 

Самый простой слайдер можно создать с помощью jQuery. Ниже приведен пример кода, который позволит вам создать слайдер с двумя изображениями, который будет переключаться при нажатии на кнопки "Влево" и "Вправо":


HTML:

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>


CSS:

 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;
}


JavaScript (с использованием jQuery):

 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();
  });
});


Этот код использует jQuery для создания слайдера, который будет переключаться между двумя изображениями. Вы можете добавить больше изображений, изменив HTML-код и соответствующим образом изменив JavaScript-код. Также вы можете настроить параметры анимации (например, скорость) путем изменения значений внутри функций moveLeft() и moveRight().