Как создать обычный slider с помощью jquery?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

  
    
    
    
  
  
    Prev
    Next
  

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

.slider {
  position: relative;
}
.slider-content {
  width: 100%;
  overflow: hidden;
}
.slider-content img {
  width: 100%;
  display: none;
}
.slider-content img.active {
  display: block;
}
.slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

 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
33
34
35
36
37

$(document).ready(function() {

  // Set active class to first slide
  $('.slider-content img:first').addClass('active');

  // Switch slide function
  function switchSlide() {

    // Get active slide
    var $active = $('.slider-content img.active');

    // Get next or previous slide
    var $next = $active.next();
    if ($next.length == 0) {
      $next = $('.slider-content img:first');
    }

    var $prev = $active.prev();
    if ($prev.length == 0) {
      $prev = $('.slider-content img:last');
    }

    // Add or remove active class
    if ($(this).hasClass('next')) {
      $active.removeClass('active');
      $next.addClass('active');
    } else if ($(this).hasClass('prev')) {
      $active.removeClass('active');
      $prev.addClass('active');
    }

  }

  // Control button events
  $('.slider-controls button').on('click', switchSlide);

});

1
2
3
4
5

<div class="slider">
  <div><img src="image1.jpg" alt=""></div>
  <div><img src="image2.jpg" alt=""></div>
  <div><img src="image3.jpg" alt=""></div>
</div>

1
2
3
4
5
6
7
8
9

.slider {
  width: 80%;
  margin: 0 auto;
}

.slider img {
  width: 100%;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$(document).ready(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: true,
    prevArrow: '<button type="button" class="slick-prev">Previous</button>',
    nextArrow: '<button type="button" class="slick-next">Next</button>',
    dots: true,
  });
});