Здравствуйте, недавно начал практиковаться с javascript. Вчера сделал слайдер с перелистыванием. Сегодня захотел добавить управляющие элементы(точки внизу, чтобы листать слайды). Слайдер состоит из контейнера, где находятся картинки. У него position: relative. При клике на кнопку со стрелкой лево или право изменяется его свойство right на 1000px, в зависимости от кнопки, на которую кликнули. Теперь я не знаю, как сделать перелистывание слайдов нижними кнопками. Мне кажется, что нужно каким-то образом получить видимое изображение, чтобы связать его с управляющей кнопкой, но я не знаю как это сделать. Очень прошу мне помочь. Заранее благодарен.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider__container">
<div class="btn btn__prev"></div>
<div class="img__container">
<div class="img__wrap">
<img src="https://i.picsum.photos/id/301/1000/640.jpg" alt="" class="slider__img" data-img="1">
<img src="https://i.picsum.photos/id/304/1000/640.jpg" alt="" class="slider__img" data-img="2">
<img src="https://i.picsum.photos/id/305/1000/640.jpg" alt="" class="slider__img" data-img="3">
<img src="https://i.picsum.photos/id/306/1000/640.jpg" alt="" class="slider__img" data-img="4">
<img src="https://i.picsum.photos/id/123/1000/640.jpg" alt="" class="slider__img" data-img="5">
</div>
</div>
<div class="btn btn__next"></div>
<div class="control__container">
<div class="control control__first control__active"></div>
<div class="control"></div>
<div class="control"></div>
<div class="control"></div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="main.js"></script>
</body>
</html>
.slider__container {
display: flex;
width: 70%;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.btn {
width: 50px;
height: 40px;
display: inline-flex;
position: relative;
background: #b35900;
justify-content: center;
align-items: center;
}
.img__container {
width: auto;
overflow-x: hidden;
max-width: 1000px;
position: relative;
margin-left: 20px;
margin-right: 20px;
}
.img__wrap {
position: relative;
display: flex;
flex-wrap: nowrap;
right: 0;
width: auto;
}
.slider__img {
max-width: 1000px;
flex-shrink: 0;
}
.btn__prev::before {
content: '';
position: relative;
display: inline-block;
background: url(arrow_left_gray.png);
width: 8px;
height: 14px;
}
.btn__next::before {
content: '';
position: relative;
display: inline-block;
background: url(arrow_right_gray.png);
width: 8px;
height: 14px;
}
.control__container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
}
.control {
width: 15px;
height: 15px;
border-radius: 50%;
background: rgb(61, 54, 54);
margin-left: 20px;
}
.control__first {
margin-left: 0;
}
.control__active {
background: rgb(70, 187, 233);
}
var prevBtn = $('.btn__prev');
var nextBtn = $('.btn__next');
var image = $('.slider__img');
var wrap = $('.img__wrap');
var isAnimating = false;
var images = document.querySelectorAll('.slider__img').length;
var maxOffset = 1000 * (images - 1);
prevBtn.click(function () {
var offset = wrap.css('right');
offset = parseInt(offset, 10);
if (offset !== 0 && isAnimating === false) {
isAnimating = true;
wrap.animate({
right: offset - 1000,
}, 1000, function(){
isAnimating = false;
});
}
});
nextBtn.click(function () {
var offset = wrap.css('right');
offset = parseInt(offset, 10);
if(offset !== maxOffset && isAnimating === false) {
isAnimating = true;
wrap.animate({
right: offset + 1000,
}, 1000, function() {
isAnimating = false;
});
}
});
