Помогите написать слайдер из трёх слайдов

12 марта 2022, 06:10

Я новичок в js. Не могу написать слайдер. Если кто знает скажите как исправить код, пробовал гуглить, но ничего не найти кроме готовых слайдеров и однослайдовых вариантов. Задача такая: Есть слайдер из трёх картинок, они должны после нажатия кнопки следовать друг за другом. Я привязал движение к переменной count, но не знаю как грамотно привязать его к каждому слайдеру.

let img = document.getElementsByClassName('img')
let href = ['img/1.png','img/2.png','img/3.png']
let count = 0;
function play() {
    count++
    img[0].src = href[count]
    img[1].src = href[count+1]
    img[2].src = href[count+2]
    if(count >= href.length){
        count=0;
    }
}
function non() {
    setInterval(play, 1000);
}

Answer 1

Bсе изображения находятся друг под другом, все скрыты кроме одного с помощью css (класс show). кнопка по очереди перебрасывает класс show с одного изображения на другое.

// находим кнопку 
const btn = document.querySelector('.btn'); 
// находим все изображения с классом .img 
const images = document.querySelectorAll('.img'); 
// счетчик начинается с 1 т.к. текущее изображение с i = 0 сейчас показано 
let i = 1; 
 
btn.addEventListener('click', () => { 
  // количество всех изображений 
  const imgCount = images.length; 
  if (i == imgCount) { 
    i = 0; 
  } 
  // изображение, которое отображается в данный момент 
  const currentImg = document.querySelector('.show'); 
  // скрыть текущее изображение 
  currentImg.classList.remove('show'); 
  // показать следующее изображение 
  images[i].classList.add('show'); 
  // увеличить счетчик 
  i++; 
})

.parent { 
  position: relative; 
} 
 
.img { 
  position: absolute; 
  top: 0; 
  left: 0; 
  display: none; 
} 
 
.show { 
  display: block; 
  position: relative; 
}

<div class="parent"> 
  <img src="https://via.placeholder.com/150" alt="" class="img show"> 
  <img src="data:image/png;base64,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" 
    alt="" class="img"> 
  <img src="data:image/jpeg;base64,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" 
    alt="" class="img"> 
</div> 
<button class="btn">next</button>

Answer 2

Обычно слайдер делают по-другому. Картинкам (или конейнеру) меняют стили, иногда создают и удаляют элементы img. Менять src наверное не самое лучшее решение, потому что так вы лишаете себя возможности делать какие-нибудь анимации.

В вашем случае ошибка в том, как вы получаете значения массива href. Если count равен 0, то всё в порядке, но как только он станет больше, индекс count + 2 уже не попадёт в массив href. И в этом случае вы бы хотели (если я правильно вас понял) у третьего элемента получить img[2].src = href[0]. На следующем инкременте count, href[0] -- второе изображение, а третье -- href[1].

Становится ясно, что число которое вы прибавляете к текущему count зависит от номера изображения не так просто. Если немного подумать, то можно сообразить что это остаток от деления на длину массива href. То есть (count + номер изображения) % href.length.

let href = [ 
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAgElEQVRYhe3WsQ2AIBCF4X8KWYyCoUyMq5iwHBTaYIMUF8OpkXvJK+E+qA4slmscEIEE7J2ay51OAogdB9eNEkDPl9dNEoDW8LP/AMyAr7o8CfCNc2EoQOtCAxjAAAYYFxBK17cAd3/su4CsOFy0kmkupZsEoLGWpzJ8kgAsY+UAedUNafDG4+UAAAAASUVORK5CYII=', 
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVRYhe2WIQ4CMRBFn0UgMOwJEJwAwTUQvQxXQSPWQNIEw3VQnKCbAIKuWShMwkzZhf7kyel/zZiBkpLHVIAHAnBVoolvVhIBr1jcxUsENH/eJUgErMpbhi+weoIDNsAlh8CrrL8tMMkhkFqLxgeGI3ACamAbWeQUOACjxOw8h8AsMTcGjjkE2iy5r6EGdsBZMKsq4ISFvytgNd9/AfcGc4FP6b9AY1guOsksj9K9RMDiLA+xfCoRKPmv3AAcVe5twpB+DwAAAABJRU5ErkJggg==', 
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVRYhe3WsQ3CMBCF4X8FkIhHgUEo0rAJBZNQUVBEQgg8EUzhSEBzNCaEQ7LPRORJr7zcZ8WFYcyY1zjgDATgnqgt4OXbH+MTLo7rNYCUJ48bNIBcy58dPmDZ0RrYAjcLQF/WpQETC8C735LiAMMCXIC9dC6zzhLQRHMOOJYEzICDJeAqiAZYyGxlCSh+CYsB+jItDdhYAOqOroCdYjbbHfimvw9oMy5XPclyPkpPGkCOZ3mQ5ZUGMOa/8gDQLPW1OzG3uAAAAABJRU5ErkJggg==' 
]; 
 
let img = document.querySelectorAll('img'); 
let count = 0; 
function play() { 
  img[0].src = href[count % href.length] 
  img[1].src = href[(count+1) % href.length] 
  img[2].src = href[(count+2) % href.length] 
 
  count++ 
  if(count >= href.length){ 
      count=0; 
  } 
 
} 
function non() { 
  setInterval(play, 1000); 
} 
 non();

<img> 
<img> 
<img>

Это вам для понимания как делать такие штуки. А если делать слайдер с помощью стилей, то можно сделать проще и красивее.

.slider { 
  width: 32px; 
  height: 32px; 
  overflow: hidden; 
  display: flex; 
} 
 
.slider * { 
  width: 100%; 
  animation: slide-left 4s linear infinite; 
} 
 
@keyframes slide-left { 
  0%, 18% { 
    transform:  translateX(0); 
  } 
  36%, 52% { 
    transform: translateX(-100%); 
  } 
  70%, 88% { 
    transform: translateX(-200%); 
  } 
  100% { 
    transform:  translateX(0); 
  } 
}

<div class="slider"> 
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAgElEQVRYhe3WsQ2AIBCF4X8KWYyCoUyMq5iwHBTaYIMUF8OpkXvJK+E+qA4slmscEIEE7J2ay51OAogdB9eNEkDPl9dNEoDW8LP/AMyAr7o8CfCNc2EoQOtCAxjAAAYYFxBK17cAd3/su4CsOFy0kmkupZsEoLGWpzJ8kgAsY+UAedUNafDG4+UAAAAASUVORK5CYII="> 
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVRYhe2WIQ4CMRBFn0UgMOwJEJwAwTUQvQxXQSPWQNIEw3VQnKCbAIKuWShMwkzZhf7kyel/zZiBkpLHVIAHAnBVoolvVhIBr1jcxUsENH/eJUgErMpbhi+weoIDNsAlh8CrrL8tMMkhkFqLxgeGI3ACamAbWeQUOACjxOw8h8AsMTcGjjkE2iy5r6EGdsBZMKsq4ISFvytgNd9/AfcGc4FP6b9AY1guOsksj9K9RMDiLA+xfCoRKPmv3AAcVe5twpB+DwAAAABJRU5ErkJggg=="> 
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAvklEQVRYhe3WsQ3CMBCF4X8FkIhHgUEo0rAJBZNQUVBEQgg8EUzhSEBzNCaEQ7LPRORJr7zcZ8WFYcyY1zjgDATgnqgt4OXbH+MTLo7rNYCUJ48bNIBcy58dPmDZ0RrYAjcLQF/WpQETC8C735LiAMMCXIC9dC6zzhLQRHMOOJYEzICDJeAqiAZYyGxlCSh+CYsB+jItDdhYAOqOroCdYjbbHfimvw9oMy5XPclyPkpPGkCOZ3mQ5ZUGMOa/8gDQLPW1OzG3uAAAAABJRU5ErkJggg=="> 
</div>

Можно ещё добавить js'а и вообще хорошо будет.