1

У меня есть слайдер на 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; } Но у меня не работает.

1 ответ 1

3

Вы изначально сравнивали количество пикселей в 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>

1
  • я подозревал что я наломал дров с длинной и количеством .Спасибо тебе
    – ZELIBOBA
    15 авг 2018 в 11:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.