Как сделать слайдер (карусель) на чистом js?

Question

[aleks767]

Пытаюсь сделать карусель, есть модификатор, но я не совсем понимаю как его использовать в javascript. Подскажите, что делаю не так? вот код

const nextSlides = document.querySelector('.nfo__btn-left');
const prevSlides = document.querySelector('.info__btn-right');
let slide = document.querySelectorAll('.info__slider-inner');

const activeInner = y => {
  for (infoSlide of slide){
    infoSlide.classList.remove('info__slider-inner--active')
  }
  infoSlide[y].classList.add('info__slider-inner--active')
};

const oneSlide = () => {
  if (index == slide.length - 1){
    index = 0
    infoSlide(index)
  }
  else{
    index++
    infoSlide(index)
  }
}

const twoSlide = () => {
  if (index == 0){
    index = slide.length - 1
    infoSlide(index)
  }
  else{
    index--
    infoSlide(index)
  }
}
nextSlides('click', twoSlide);
prevSlides('click', oneSlide);

Answer 1

[php_raper]

Подскажите, что делаю не так? вот код
--- Пытаетесь изобрести велосипед )

1. Создайте класс Slaider. Можно старым или новым способом. Function slider или class Slider. С чем более удобнее работать.
2. У вашего бедующего объекта должны быть параметры, el - элемент с дочерними слайдами, и nextEl, prevEl, логика думаю понятна. Для того чтобы вы могли его инициализировать несколько раз и использовать как библиотеку .

const myslider = new Slider({el: '.classNameDomEl', nextEl:'',prevEl:""})
myslider.run()

3. Вы должны собрать массив ваших слайдов из дочерних элементов блока el. Кнопками вы можете менять индекс текущего слайда и вешать на блок активного слайда класс active.
4. Помимо вешания класса active вы должны определить какой будет анимация смены слайда, если это карусель то смотрите в сторону transform: translateX. Это css, желательно это реализовать на стороне JS
5. Если вы будете реализововать 4 пункт на стороне JS тогда ваши слайды надо будет расположить горизонтально в левую сторону и при смене слайда смешать все блоки справа на лево через translateX. Расположение по умолчанию можно реализовать на CSS. Остальной функционал на JS
6. Не забудьте для блока el сделать owerflow:hidden чтобы скрыть элементы которые не должны попадать в поле видимости

Comments

[aleks767]

спасибо

Answer 2

[Alekosh Akhosh]

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