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

1

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div id="slider">
  <div class="slide">
    <img src="slide1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="slide2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

#slider {
  width: 800px;
  height: 600px;
  overflow: hidden;
}

#slider .slide {
  width: 800px;
  height: 600px;
  float: left;
}

#slider .slide:not(:first-child) {
  display: none;
}

1
2
3
4
5
6
7
8

<div id="slider">
  <div class="slide" id="slide1">Первый слайд</div>
  <div class="slide" id="slide2">Второй слайд</div>
  <div class="slide" id="slide3">Третий слайд</div>
</div>

<button id="prev">Назад</button>
<button id="next">Вперед</button>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

#slider {
  width: 600px;
  height: 300px;
  overflow: hidden;
}

.slide {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#slide1 {
  display: block;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(document).ready(function() {
  var currentSlide = 1;
  var numSlides = $('.slide').length;

  $('#next').click(function() {
    if (currentSlide == numSlides) {
      currentSlide = 1;
    } else {
      currentSlide++;
    }
    $('.slide').fadeOut();
    $('#slide' + currentSlide).fadeIn();
  });

  $('#prev').click(function() {
    if (currentSlide == 1) {
      currentSlide = numSlides;
    } else {
      currentSlide--;
    }
    $('.slide').fadeOut();
    $('#slide' + currentSlide).fadeIn();
  });
});