const sliders = document.querySelectorAll("[data-slider]");
sliders.forEach(slider => {
const track = slider.querySelector("[data-slider-track]");
const prev = slider.querySelector("[data-slider-prev]");
const next = slider.querySelector("[data-slider-next]");
if (track) {
prev.addEventListener("click", () => {
next.disabled = false;
// next.removeAttribute("disabled");
track.scrollTo({
left: track.scrollLeft - track.firstElementChild.offsetWidth,
behavior: "smooth"
});
});
next.addEventListener("click", () => {
prev.disabled = false;
// prev.removeAttribute("disabled");
track.scrollTo({
left: track.scrollLeft + track.firstElementChild.offsetWidth,
behavior: "smooth"
});
});
track.addEventListener("scroll", () => {
const trackScrollWidth = track.scrollWidth;
const trackOuterWidth = track.clientWidth;
prev.disabled = false;
next.disabled = false;
// prev.removeAttribute("disabled");
// next.removeAttribute("disabled");
if (track.scrollLeft <= 0) prev.disabled = true; //prev.setAttribute("disabled", "");
if (track.scrollLeft === trackScrollWidth - trackOuterWidth) next.disabled = true; //next.setAttribute("disabled", "");
});
};
});
min-width: 370px;
, поэтому при сужении они не сжимаются меньше или что-то я не понял?).post_item:not(:last-child) {
margin-right: 20px;
}
this.offsetSlide = ((this.slides[1].offsetLeft - this.slides[0].offsetWidth)*100)/this.main.offsetWidth;
, то есть по клику на кнопки высчитываем процентное соотношение отступа. Пришлось добавить её и для кнопки назад и вперед (81 и 97 строки).let tabs = document.querySelectorAll('.number'), // Ваши цифры.
squares = document.querySelectorAll('.square'); // Ваши квадраты.
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[i];
tab.addEventListener('click', function() {
for (let j = 0; j < squares.length; j++) {
const square = squares[j];
square.classList.remove('is-active'); // Убираем у всех активный класс.
if (i === j) square.classList.add('is-active'); // Добавляем активный класс квадрату по выбранному номеру.
};
});
};
let input = document.querySelector(".input"),
checkboxInput = document.querySelector(".checkbox-input");
</>
или в песочнице, например, тут, более удобно читать его))