Как задать проверку в цикле?

Question

[Андрей Иванов]

https://codepen.io/newdecline/pen/qyRzOY

Не могу понять как сделать проверку что если индекс у слайдера больше индекса массива то индекс надо сделать опять равным 0 что бы по кругу мотались слайдеры

Answer 1

[0xD34F]

if( slideIndex > sliderItem.length ) {

Да ну? Вы что, действительно не знаете, что массивы индексируются начиная с нуля? Не будет sliderItem.length корректным значением, элемента с таким индексом уже нет. Замените > на ===.

Comments

[Андрей Иванов]

Да знаю что с нуля нумеруются, но как то с натяжкой учится язык, спасибо .

элемента с таким индексом уже нет

а куда он делся ?

[0xD34F]

Что значит "куда делся"? Не было его и быть не может. Или вас слово "уже" смущает? Так это сказано в том смысле что с индексом length - 1 ЕЩЁ есть, а с length УЖЕ нет. Смысловое ударение на индекс, а не на конкретный элемент.

[Андрей Иванов]

slideIndex >= sliderItem.length

Так ещё работает, но щас пытаюсь понять почему..

[0xD34F]

Конечно работает - ведь проверка на равенство в таком варианте тоже присутствует.

[Андрей Иванов]

0xD34F, https://codepen.io/newdecline/pen/qyRzOY
а можете ещё подсказать как завязать точки внизу слайдера на сам слайдер, пока только получилось привязать смену цветов при смене картинок, но когда кликаю на точки цвета меняются а картинки нет

[0xD34F]

Чтобы не дублировать код, имеет смысл сделать функцию, которая будет делать активным указанный слайд, и использовать её - и при кликах на .prev/.next, и при кликах на .dots. Как-то так:

HTML

<div class="slider-container">
  <div class="slider-item">
    <div class="slider-number">1/3</div>
    <img src="https://сезоны-года.рф/sites/default/files/images/shkolnikam/gora_2.jpg">
    <div class="slider-text">Горы</div>
  </div>
  <div class="slider-item">
    <div class="slider-number">2/3</div>
    <img src="https://lovingnewyork.com.br/wp-content/uploads/2015/10/brooklyn-bridge-park.jpg">
    <div class="slider-text">Мост</div>
  </div>
  <div class="slider-item">
    <div class="slider-number">3/3</div>
    <img src="http://fotorelax.ru/wp-content/uploads/2017/11/Sunset-in-Greenland-01.jpg">
    <div class="slider-text">Закат</div>
  </div>
  <a class="prev" data-change="-1">&#10094;</a>
  <a class="next" data-change="+1">&#10095;</a>
  <div class="dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS

body {
  background-color: #232323;
  color: #fff;
  margin-top: 50px;
}

.slider-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
}
  
.slider-item {
  display: none;
}

.slider-item.slider-active {
  display: block;
}

.slider-item img {
  width: 100%;
}

.prev,
.next {
  position: absolute;
  cursor: pointer;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  transition: .6s;
  border-radius: 0 3px 3px 0;
}
    
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0,0,0,0.8);
}

.slider-text {
  position: absolute;
  padding: 8px 12px;
  font-size: 16px;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-number {
  position: absolute;
  top: 30px;
  left: 30px;
}

.dots {
  text-align: center;
}

.dot {
  cursor: pointer;
  width: 13px;
  height: 13px;
  margin: 15px 2px;
  border-radius: 50%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

JS

const slider = document.querySelector('.slider-container');
const sliderItems = document.querySelectorAll('.slider-item');
const dots = [...document.querySelectorAll('.dot')];
let slideIndex = null;

slider.addEventListener('click', function({ target: t }) {
  if (t.matches('[data-change]')) {
    setActiveSlide(slideIndex + +t.dataset.change);
  } else if (t.matches('.dot')) {
    setActiveSlide(dots.indexOf(t));
  }
});

setActiveSlide(0);

function setActiveSlide(index) {
  slider.querySelectorAll('.slider-active').forEach(n => n.classList.remove('slider-active'));
  slider.querySelectorAll('.active').forEach(n => n.classList.remove('active'));

  slideIndex = (index >= 0 ? 0 : sliderItems.length) + (index % sliderItems.length);

  sliderItems[slideIndex].classList.add('slider-active');
  dots[slideIndex].classList.add('active');
}

[Андрей Иванов]

0xD34F, Еще раз спасибо , щас буду изучать