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 that you have read and understand our privacy policy and code of conduct.

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