Не работает очень простой слайдер на js

219

02 ноября 2018, 10:40

У меня есть слайдер на 4 картинки.Каждая занимает 100% блока.При нажатии next она сдвигается в лево на 100% и появляется новая.

var left = 0; 
document.getElementById("next").onclick = sliderLeft; 
function sliderLeft() { 
  var polosa = document.getElementById("polosa"); 
  var max_lenght = document.querySelectorAll(".image"); 
  left = left - 100; 
  if (left < max_lenght.length) { 
    left = 0; 
  } 
  /* 
   if (left <= -400) { 
    left = 0; 
  } 
  */ 
  polosa.style.left = left + "%"; 
}

body{ 
 display: flex; 
  flex-direction:column; 
  align-items:center; 
} 
img { 
  float: left; 
  width: 20%; 
} 
#slider { 
  border: 3px solid black; 
  overflow: hidden; 
  max-width: 600px; 
} 
 
.arrows { 
  margin-top: 60px; 
} 
#polosa { 
  position: relative; 
  display: inherit; 
  transition: 1s ease; 
  left: 0; 
  width: 500%; 
}

<div id="slider"> 
  <div id="polosa"> 
  <img class="image" src="https://images.unsplash.com/photo-1534106474077-f9e9c6f5a47c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93e4a52103a10a38beffb1c30bed41ba&auto=format&fit=crop&w=500&q=60" alt=""> 
 <img class="image" src="https://images.unsplash.com/photo-1534076355207-1717511180ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dac3b914c452ddd9c6c51e1828ac0a76&auto=format&fit=crop&w=500&q=60" alt=""> 
 <img class="image" src="https://images.unsplash.com/photo-1534083264897-aeabfc7daf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d40d4da633c570324291ec2e6e5bd4f5&auto=format&fit=crop&w=500&q=60" alt=""> 
<img class="image" src="https://images.unsplash.com/photo-1534083152091-df439a43a2b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bf58d027c1a0fbd9b92cd1de830438f&auto=format&fit=crop&w=500&q=60" alt=""> 
    </div> 
</div> 
<div class="arrows"> 
  <button id="prev">prev</button> 
  <button id="next">next</button> 
</div>

В общем по началу когда у меня пролистались все картинки у меня была простая проверка if (left<= -400){left=0} и оно моталось к первой картинке.Но допустим каждый раз я буду добавлять картинку я не хочу каждый раз в коде менять числа (с 400 на 500 с 500 на 600 и т.д.)Я попытался сделать переменную в которой будут все картинки и в проверке прописать переменная.lenght if (left < max_lenght.length) { left = 0; } Но у меня не работает.

Answer 1

Вы изначально сравнивали количество пикселей в left с -400, а в итоге стали зачем-то сравнивать количество изображений с left. Исправленный вариант:

var left = 0; 
document.getElementById("next").onclick = sliderLeft; 
function sliderLeft() { 
  var polosa = document.getElementById("polosa"); 
  var max_lenght = document.querySelectorAll(".image"); 
  left = left - 100; 
  if (left <= (max_lenght.length*-100)) { 
    left = 0; 
  } 
  /* 
   if (left <= -400) { 
    left = 0; 
  } 
  */ 
  polosa.style.left = left + "%"; 
}

body{ 
 display: flex; 
  flex-direction:column; 
  align-items:center; 
} 
img { 
  float: left; 
  width: 20%; 
} 
#slider { 
  border: 3px solid black; 
  overflow: hidden; 
  max-width: 600px; 
} 
 
.arrows { 
  margin-top: 60px; 
} 
#polosa { 
  position: relative; 
  display: inherit; 
  transition: 1s ease; 
  left: 0; 
  width: 500%; 
}

<div id="slider"> 
  <div id="polosa"> 
  <img class="image" src="https://images.unsplash.com/photo-1534106474077-f9e9c6f5a47c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93e4a52103a10a38beffb1c30bed41ba&auto=format&fit=crop&w=500&q=60" alt=""> 
 <img class="image" src="https://images.unsplash.com/photo-1534076355207-1717511180ba?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dac3b914c452ddd9c6c51e1828ac0a76&auto=format&fit=crop&w=500&q=60" alt=""> 
 <img class="image" src="https://images.unsplash.com/photo-1534083264897-aeabfc7daf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d40d4da633c570324291ec2e6e5bd4f5&auto=format&fit=crop&w=500&q=60" alt=""> 
<img class="image" src="https://images.unsplash.com/photo-1534083152091-df439a43a2b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bf58d027c1a0fbd9b92cd1de830438f&auto=format&fit=crop&w=500&q=60" alt=""> 
    </div> 
</div> 
<div class="arrows"> 
  <button id="prev">prev</button> 
  <button id="next">next</button> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Смена div'в при клике по ссылке

Нужна помощь! Ситуация такая, что есть боковое меню, с 4 пунктами и для каждого из них свой блокКак мне реализовать, чтобы при клике из каких-нибудь...

223

HTML