iamlorddop
@iamlorddop

Как запретить уход вправо у слайдера?

Есть закомментированный код запрета ухода вправо, но он не работает, он изначально задает для next значение disabled. Что нужно поправить?
JavaScript

let position = 0;
const slidesToShow = 3;
const slidesToScroll = 1;
const container = document.querySelector(".review__row");
const track = document.querySelector(".review__track");
const items = document.querySelectorAll(".review__item");
const btnPrev = document.querySelector(".prev");
const btnNext = document.querySelector(".next");
const itemsCount = items.length;
const itemWidth = container.clientWidth / slidesToShow;
const movePosition = slidesToScroll * itemWidth;

items.forEach((item) => {
  item.style.minWidth = `${itemWidth}px`;
});

btnPrev.addEventListener("click", () => {
  position += movePosition;

  setPosition();
  checkBtns();
});

btnNext.addEventListener("click", () => {
  position -= movePosition;

  setPosition();
  checkBtns();
});

const setPosition = () => {
  track.style.transform = `translateX(${position}px)`;
};

const checkBtns = () => {
  btnPrev.disabled = position == 0;
  // btnNext.disabled = position <= -(itemsCount - slidesToShow) * itemWidth;
};

checkBtns();

  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
@7rows
Frontend Разработчик / Vue / JS / TS / CSS
btnNext.disabled = position === (itemsCount - 1);
Как-то так, этот код отработает тогда, когда у вас последний элемент будет равен позиции
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы