l_mke,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
#slider {
width: 80vw;
height: 80vh;
margin: 0px auto;
position: relative;
border: 3px solid #c0c0c0;
overflow: hidden;
}
.slide_item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: all ease-in-out 2s;
float: left;
}
.slider-pagination {
display: flex;
justify-content: center;
}
[data-id] {
background-color: hsl(236, 77%, 45%);
height: 18px;
width: 18px;
border-radius: 50%;
margin: 12px;
line-height: 18px;
text-align: center;
color: hsl(0, 0%, 100%);
}
[data-id]:hover:after,
[data-id].active:after {
content: attr(data-id);
font-size: 12px;
}
</style>
</head>
<body>
<h1 style="text-align: center;font-size: 40px; margin: 20px 0;">Слайдер</h1>
<div id="slider">
<img
src="https://picsum.photos/id/1002/4312/2868"
alt=""
class="slide_item"
/>
<img
src="https://picsum.photos/id/100/2500/1656"
alt=""
class="slide_item"
/>
<img
src="https://picsum.photos/id/1000/5626/3635"
alt=""
class="slide_item"
/>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('#slider'),
slides = slider.querySelectorAll('.slide_item'),
length = slides.length,
html = Array.from(
{ length },
(v, k) => `<div class="slider-point" data-id="${++k}"></div>`
);
let index = length - 1;
slider.insertAdjacentHTML(
'afterEnd',
`<div class="slider-pagination">${html.join('')}</div>`
);
const points = document.querySelectorAll('.slider-point');
function anim() {
slides[index].style.left = '';
}
document
.querySelector('.slider-pagination')
.addEventListener('click', ({ target }) => {
let id = target.dataset.id;
if (id) {
id -= 1;
if (index == id) return;
points[index].classList.remove('active');
slides[id].style.left = id > index ? '100%' : '-100%';
index = id;
points[index].classList.add('active');
slider.appendChild(slides[index]);
window.setTimeout(anim, 30);
}
});
points[0].click()
});
</script>
</body>
</html>