33 lines
930 B
JavaScript
33 lines
930 B
JavaScript
let items = document.querySelectorAll('.slider .list .item');
|
|
let next = document.getElementById('next');
|
|
let prev = document.getElementById('prev');
|
|
let thumbnails = document.querySelectorAll('.thumbnail .item');
|
|
|
|
let countItem = items.length;
|
|
let itemAtive = 0;
|
|
|
|
next.onclick = function () {
|
|
itemAtive = itemAtive + 1;
|
|
if (itemAtive >= countItem) {
|
|
itemAtive = 0;
|
|
}
|
|
showSlider();
|
|
}
|
|
|
|
prev.onclick = function () {
|
|
itemAtive = itemAtive - 1;
|
|
if (itemAtive < 0) {
|
|
itemAtive = countItem - 1;
|
|
}
|
|
showSlider();
|
|
}
|
|
|
|
function showSlider() {
|
|
let itemAtiveOld = document.querySelector('.slider .list .item.active');
|
|
let thgumbnailAtiveOld = document.querySelector('.thumbnail .item.active');
|
|
itemAtiveOld.classList.remove('active')
|
|
thgumbnailAtiveOld.classList.remove('active')
|
|
|
|
items[itemAtive].classList.add('active');
|
|
thumbnails[itemAtive].classList.add('active');
|
|
} |