В общем. Идея такая. Есть обертка, в ней абсолютным позиционированием размещаются слайдеры. Каждому слайду даю позицию left. При этом каждый слайдер растягивается на всю ширину экрана, то бишь у первого left: 0%, у второго left:100% и тд. Данные позиции заношу в массив move. При клике на prev или next вызываю функцию plusSlide где меняю значения массива move и естественно значения left у слайдов. Получается анимация листания. Сложность создать бесконечную прокрутку. Общую идею понимаю, но реализовать совсем не получается. Скрины прилагаю : 1). html разметка, css стили, скрин слайдера
JS:
window.addEventListener('DOMContentLoaded', function() {
let items = document.getElementsByClassName('slider-item'),
sliderWrap = document.getElementsByClassName('slider-wrap')[0],
arrayHeight = [],
prev = document.getElementsByClassName('prev-wrap')[0],
next = document.getElementsByClassName('next-wrap')[0],
cirklesWrap = document.getElementsByClassName('cirkles')[0],
cirkles = document.getElementsByClassName('cirkle'),
slideIndex = 1;
function heightMax() {
for (let i = 0; i < items.length; i++) {
arrayHeight.push(items[i].offsetHeight);
}
sliderWrap.style.height = getMaxOfArray(arrayHeight) + 'px';
}
heightMax();
window.addEventListener('resize', function() {
heightMax();
});
function getMaxOfArray(numArray) {
return Math.max.apply(null, numArray);
}
let move = new Array;
arrayMove();
function arrayMove() {
for (let i = 0; i < items.length; i++) {
move.push(i*100);
items[i].style.left = move[i] + '%';
}
}
function plusSlide(index) {
if (index < 0) {
for (let i = 0; i < items.length; i++) {
move[i] += 100;
items[i].style.left = move[i] + '%';
}
}
if (index > 0) {
for (let i = 0; i < items.length; i++) {
move[i] -= 100;
items[i].style.left = move[i] + '%';
}
}
}
let a = 0;
function cirkleActive(n) {
a += n;
for (let i = 0; i < cirkles.length; i++) {
cirkles[i].classList.remove('cirkle-active');
}
if (a > cirkles.length - 1) {
a = 0;
}
if (a < 0) {
a = cirkles.length - 1;
}
if (a < cirkles.length && a >= 0) {
cirkles[a].classList.add('cirkle-active');
}
}
prev.addEventListener('click', () => {
plusSlide(-1);
cirkleActive(-1);
});
next.addEventListener('click', () => {
plusSlide(1);
cirkleActive(1);
});
});
