let position = 0;
const slidesToShow = 3;
const slidesToScroll = 1;
const container = document.querySelector('.slider-container');
const track = document.querySelector('.slider-track');
const btnPrev = document.querySelector('.btn-prev');
const btnNext = document.querySelector('.btn-next');
const items = document.querySelectorAll('.slider-item');
const itemsCount = items.length;
const itemWidth = container.clientWidth / slidesToShow;
const movePosition = slidesToScroll * itemWidth;
let showIdx = 1
items.forEach((item, idx) => {
item.style.minWidth = `${itemWidth}px`;
});
btnNext.addEventListener('click', () => {
const itemsLeft = (Math.abs(position) + slidesToShow * itemWidth) / itemWidth;
position -= itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
showIdx++;
setPosition();
checkBtns();
});
btnPrev.addEventListener('click', () => {
const itemsLeft = Math.abs(position) / itemWidth;
position += itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
showIdx--;
setPosition();
checkBtns();
});
const setPosition = () => {
track.style.transform = `translateX(${position}px)`;
};
function checkBtns () {
btnPrev.disabled = position === 0;
btnNext.disabled = position <= -(itemsCount - slidesToShow) * itemWidth;
items.forEach((item, idx) => {
if (idx !== showIdx) {
item.querySelector('.description-product').hidden = true;
} else {
item.querySelector('.description-product').hidden = false;
}
});
}
checkBtns();