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

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

от alisa.bahringer , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от nelle , 5 месяцев назад

@alisa.bahringer 

Для создания слайдера с помощью jQuery вам нужно сделать следующее:

  1. Подключите jQuery к своему HTML-документу. Вы можете это сделать, используя тег <script> и указав путь к библиотеке jQuery:
1
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


  1. Создайте HTML-разметку для слайдера. Это может выглядеть примерно так:
 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. Добавьте стили CSS для слайдера. Например, вы можете указать ширину и высоту слайдера, а также скрыть все слайды, кроме первого:
 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. Напишите функцию, которая будет отображать следующий слайд. Например, функция может скрывать текущий слайд

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

от rudolph_senger , 3 месяца назад

@alisa.bahringer 

Для создания простого слайдера на jQuery можно использовать функцию animate() для изменения положения элементов на странице. Вот пример кода для создания слайдера с тремя слайдами:


HTML код:

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>


CSS код:

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


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


В этом примере мы определяем текущий слайд (изначально это первый слайд) и общее количество слайдов на странице. Затем мы привязываем функции нажатия кнопок "Назад" и "Вперед", которые сначала скрывают все слайды, а затем отображают текущий слайд, используя функции fadeIn() и fadeOut(). Когда текущий слайд достигает конца списка слайдов, он снова становится первым, и наоборот.