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

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

от terrence , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от rebekah , год назад

@terrence 

Для создания обычного slider с помощью jQuery можно использовать следующий код:


HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
  
    
    
    
  
  
    Prev
    Next
  


CSS:

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


JavaScript:

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

});


Этот код создает простой slider, который переключает изображения с помощью кнопок "Prev" и "Next". Для управления слайдером используются CSS-классы, а функциональность реализована с помощью функции на языке JavaScript.

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

от violette_robel , 7 месяцев назад

@terrence 

Также, можно использовать уже готовые библиотеки для создания slider'ов, такие как Slick Slider или Owl Carousel, которые предоставляют множество настроек и возможностей для создания красивых и функциональных слайдеров.


Пример создания slider с использованием Slick Slider:


HTML:

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>


CSS:

1
2
3
4
5
6
7
8
9
.slider {
  width: 80%;
  margin: 0 auto;
}

.slider img {
  width: 100%;
}


JavaScript:

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


Здесь мы использовали Slick Slider и инициализировали его для элемента с классом "slider". Параметры autoplay, arrows, dots позволяют настроить автоматическое проигрывание, кнопки навигации и точки для слайдов. Также, можно дополнительно настраивать слайдер, указывая другие параметры в инициализации.