100-project-100-days-website/100_projects/37-image-slider/main.js
2023-03-30 03:12:35 +03:00
Ask

35 lines
831 B
JavaScript

{4768799ab9d9b7a2e5056ae87c86fb5e36c26165 true 831 main.js 0xc001ec7260}

(function () {
const pictures = [
'1',
'2',
'3',
'4',
'5',
'6',
'7'
];
const buttons = document.querySelectorAll('.btn');
const imgDiv = document.querySelector('.img');
let counter = 0
buttons.forEach(function (button) {
button.addEventListener("click", function (e) {
if (button.classList.contains('btn-left')){
counter--
if (counter < 0){
counter = pictures.length - 1
}
imgDiv.style.backgroundImage = `url('./img/${pictures[counter]}.jpg')`
}
if (button.classList.contains('btn-right')){
counter--
if (counter < 0){
counter = pictures.length - 1
}
imgDiv.style.backgroundImage = `url('./img/${pictures[counter]}.jpg')`
}
})
})
}) ();