横幅滑块

<div class="artru-slide_container">
	
	<div class="artru-slide_div">
		<img src="https://cdn.jsdelivr.net/gh/artru-git/slide-banner@main/slide-1.png" alt="Ảnh 1">
	</div>
	
	<div class="artru-slide_div">
		<img src="https://cdn.jsdelivr.net/gh/artru-git/slide-banner@main/slide-2.png" alt="Ảnh 2">
	</div>
	
	<div class="artru-slide_div">
		<img src="https://cdn.jsdelivr.net/gh/artru-git/slide-banner@main/slide-3.png" alt="Ảnh 3">
	</div>
	
	<div class="artru-slide_div">
		<img src="https://cdn.jsdelivr.net/gh/artru-git/slide-banner@main/slide-4.png" alt="Ảnh 3">
	</div>
</div>
<div class="artru-slide_button">
	<button onclick="changeSlide(-1)">Trái</button>
	<button onclick="changeSlide(1)">Phải</button>
</div>
<div class="artru-slide_dot">
	<span class="dot" onclick="currentSlide(1)"></span>
	<span class="dot" onclick="currentSlide(2)"></span>
	<span class="dot" onclick="currentSlide(3)"></span>
	<span class="dot" onclick="currentSlide(4)"></span>
</div>
<script>
	var artru_slideIndex = 1;
	showSlide(artru_slideIndex);
	function changeSlide(n) {
		showSlide(artru_slideIndex += n);
	}
	function currentSlide(n) {
		showSlide(artru_slideIndex = n);
	}
	function showSlide(n) {
		var artru_slides = document.querySelectorAll(".artru-slide_div");
		var artru_dots = document.querySelectorAll(".artru-slide_dot .dot");
		if (n > artru_slides.length) {
			artru_slideIndex = 1;
		}
		if (n < 1) {
			artru_slideIndex = artru_slides.length;
		}
		for (var i = 0; i < artru_slides.length; i++) {
			artru_slides[i].style.display = "none";
		}
		for (var i = 0; i < artru_dots.length; i++) {
			artru_dots[i].className = artru_dots[i].className.replace(" active", "");
		}
		artru_slides[artru_slideIndex - 1].style.display = "block";
		artru_dots[artru_slideIndex - 1].className += " active";
	}
</script>
<style>
	.artru-slide_container {
		display: flex;
		justify-content: center;
	}
	.artru-slide_div {
		display: none;
	}
	.artru-slide_div img {
		width: 100%;
		height: auto;
	}
	.artru-slide_button {
		margin-top: 10px;
		display: flex;
		justify-content: center;
	}
	.artru-slide_button button {
		margin: 0 5px;
		padding: 5px 10px;
	}
	.artru-slide_dot {
		text-align: center;
		margin-top: 10px;
	}
	.artru-slide_dot span {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #bbb;
		margin: 0 5px;
		cursor: pointer;
	}
	.artru-slide_dot span.active {
		background-color: #333;
	}
</style>

指导

PREVIEW ()