Javascript слайдер со стрелками - PullRequest
Новая
       11

Javascript слайдер со стрелками

0 голосов
/ 08 октября 2018

Я хочу сделать ползунок со стрелками, я попробовал несколько методов, но я все еще не смог, поэтому я не знаю, с чего начать, вот мой HTML, 

    <div class="previous-butn"></div>
<div class="slider">
<a href="">
<img src="assets/media/images/colormood-slide.jpg" alt="">
</a>
<div class="next-butn"></div>

, а вот мой js 

const currentSlide = document.querySelector('.slider img');
const projectSlide = [
'assets/media/images/colormood-slide.jpg',
'assets/media/images/cancellato-slide.jpg',
'assets/media/images/grazia-slide.jpg',
'assets/media/images/maxnextdoor-slide.jpg',
'assets/media/images/sasha-slide.jpg',
'assets/media/images/windinthecity-slide.jpg',
'assets/media/images/gullsnitt-slide.jpg'
];
let slidesCounter = 1;

1 Ответ

0 голосов
/ 08 октября 2018

Прежде всего создайте HTML и CSS для вашего слайдера.Используйте один отдельный div, который содержит все остальное.В вашем случае с ползунком контейнерный контейнер должен содержать два основных блока: один для изображений слайдера, а другой - кнопки управления, то есть стрелки.

В контейнере изображений слайдера поместите несколько изображений.

Используйте CSS класс, такой как 'активный' только на первом изображении.Теперь напишите CSS, чтобы скрыть все изображения, кроме того, которое имеет класс 'active'.Также используйте CSS для размещения стрелок навигатора там, где вы хотите, чтобы они были.

Теперь откройте страницу в браузере и посмотрите, все ли в порядке.Когда все в порядке, перейдите к JS

Добавьте события нажатия на кнопки со стрелками (не учитывая автозапуск в данный момент)

Ниже приведена логика для кнопки NEXT

  1. CurrentActiveImageIndex = Получить индекс изображения с активным классом
  2. TotalNumberOfImages = Подсчитать общее количество изображений в слайдере
  3. NextActiveImageIndex = CurrentActiveImageIndex + 1
  4. IF NextActiveImageIndex == TotalNumberOfI =
  5. THEN NextActiveImageIndex = 0
  6. Удалить активный класс из всех изображений
  7. Добавить активный класс к изображению в NextActiveImageIndex

Логика дляКнопка ПРЕДЫДУЩАЯ будет как раз наоборот, только следующие измененные строки

NextActiveImageIndex = CurrentActiveImageIndex - 1 IF NextActiveImageIndex <0 </li> THEN NextActiveImageIndex = TotalNumberOfImages - 1
...