<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js.js"></script>
<a href="style.css"></a>
</head>
<body>
<h1>Slider</h1>
<div class="slider">
<div class="slider__container">
<img class="slider__image" src="img/product-11.jpg" alt="imgsa">
<div class="slider__controls">
<!-- <div class="slider__dots">
<span class="slider__dot active"></span>
<span class="slider__dot"></span>
<span class="slider__dot"></span>
</div> -->
<button class="slider__nav slider__nav-left" onclick="slide(-1)"><</button>
<button class="slider__nav slider__nav-right"onclick="slide(1)" >></button>
</div>
</div>
</div>
</body>
</html>
const img = document.querySelector (".slider__image");
const imgArr = ["img/product-11.jpg", "img/product-21.jpg", "img/product-31.jpg"];
let currentIndex = 1;
function slide(direction) {
currentIndex += direction;
img.src = imgArr[currentIndex];
}
Простой
