JavaScript
- 2 ответа
- 0 вопросов
0
Вклад в тег
<body>
<div class="wrapper">
<div class="slider">
<div class="container">
<div class="slider__block">
<div class="slider__img">
</div>
<div class="slider__btn">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>const prevBtn = document.querySelector('.prev')
const nextBtn = document.querySelector('.next')
const outImg = document.querySelector('.slider__img')
const art1 = './img/art1.jpg'
const art2 = './img/art2.jpg'
const art3 = './img/art3.jpg'
const art4 = './img/art4.jpg'
const art5 = './img/art5.jpg'
const images = [art1, art2, art3, art4, art5]
let i = 0
outImg.innerHTML =`<img src=${images[i]}>`
nextBtn.onclick = () =>{
if(i < images.length - 1){
i++
}else{
i = 0
}
outImg.innerHTML =`<img src=${images[i]}>`
}
prevBtn.onclick = () =>{
if(i > 0 ){
i--
}else{
i = images.length-1
}
outImg.innerHTML =`<img src=${images[i]}>`
}