Javascript-форум - Слайдер карусель

faceVB,
Malleys,
как вариант ...
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 @import url('https://fonts.googleapis.com/css?family=Parisienne&display=swap');
.carousel-container {
	display: block;
	width: 640px;
	height: 320px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: black;
}
.carousel-slides {
	width: 100%;
	height: 100%;
}
.carousel-slides > * {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	transition: transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateX(-100%);
}

.carousel-container:hover .btn-container {
   opacity: 1;
   transform: translateY(0%);
}

.btn-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(133, 194, 255, .3);
	z-index: 2;
    opacity: 0;
    transform: translateY(100%);
    transition: .4s;
}
.btn-container > button {
	background: transparent;
	border: 0;
    padding: 10px;
	cursor: pointer;
	font: 400 2.4em / 23px "Parisienne", sans-serif;
    color: #FFFFFF;
}
.btn-container > .info {
	display: grid;
	place-content: center;
}
.dots-container {
	position: absolute;
	right: 20px;
	top: 0;
	bottom: 54px;
	z-index: 2;
	height: max-content;
	margin: auto;
    display: flex;
    flex-direction: column;
}
.dots-container > .dot {
	-webkit-appearance: none;
	appearance: none;
	width: 1em;
	height: 1em;
	border: 1px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
    margin: 3px;
	filter: drop-shadow(0 0 2px black);
}
.dots-container > .dot:checked {
	background-color: rgba(240, 255, 240, .8);
    border: transparent;
}
.dots-container > .dot:focus, .btn-container > button {
   outline: none;
}
.info{
    color: #FFFFFF;
    font: 400 1.2em / 23px "Parisienne", sans-serif;
}

  </style>

</head>
<body>
<div class="carousel-container">
	<div class="carousel-slides">
		<img src="https://picsum.photos/640/320?1">
		<img src="https://picsum.photos/640/320?2">
		<img src="https://picsum.photos/640/320?3">
		<img src="https://picsum.photos/640/320?4">
        <img src="https://picsum.photos/640/320?5">
		<img src="https://picsum.photos/640/320?6">
		<img src="https://picsum.photos/640/320?7">
		<img src="https://picsum.photos/640/320?8">
	</div>
	<div class="btn-container">
		<button data-step="-1"><</button>
		<section class="info">1 of 4</section>
		<button data-step="1">></button>
	</div>
	<div class="dots-container"></div>
</div>
<script>
(function() {
	function Slider(carouselContainer) {
		this.slides = Array.from(carouselContainer.querySelectorAll(".carousel-slides > *"));
		this.btns = carouselContainer.querySelector(".btn-container");
		this.info = carouselContainer.querySelector(".btn-container > .info");
		var dotsContainer = carouselContainer.querySelector(".dots-container");
        this.currentSlider = this.slides[1];
		this.dots = this.slides.map(function(slide, index) {
			var dot = document.createElement("input");
			dot.type = "radio";
			dot.name = "slider-" + Slider.id;
			dot.className = "dot";
			dot.setAttribute("data-slide", index);
			dotsContainer.appendChild(dot);
			return dot;
		});

		this.btns.addEventListener("click", (function(event) {
			var button = event.target.closest("[data-step]");
			if(!button) return;

			var step = Number(button.getAttribute("data-step"));
			this.go(Math.mod(this.index + step, this.slides.length));
		}).bind(this));

		dotsContainer.addEventListener("change", (function(event) {
			var index = Number(event.target.getAttribute("data-slide"));
			this.go(index);
		}).bind(this));

		this.index = 0;
		this.go(0);
		Slider.id++;
	}

	Slider.id = 0;

	Slider.prototype.go = function(index) {
        var X = index > this.index ? 100 : -100;
        if(!index && this.index == this.slides.length - 1) X = 100;
        if(index == this.slides.length - 1 && !this.index) X = -100;
        this.index = index;
	    this.dots[this.index].checked = true;
        this.info.textContent = (this.index + 1) + " of " + this.slides.length;
        this.nextSlider = this.slides[this.index];
        this.nextSlider.style.transition = "none";
        this.nextSlider.style.transform = `translateX(${X}%)`;
        document.documentElement.clientWidth;
        this.nextSlider.style.transition = "";
        this.nextSlider.style.transform = `translateX(0%)`;
        this.currentSlider.style.transform = `translateX(${-X}%)`;
        [this.currentSlider, this.nextSlider] = [this.nextSlider, this.currentSlider];

	};

	Math.mod = function mod(a, b) {
		return (a + b) % b;
	};

	Array.from(document.querySelectorAll(".carousel-container")).forEach(function(container) {
		new Slider(container);
	});
})();
</script>
</body>
</html>