A well-designed slideshow with JavaScript and arrows can change the way users interact with your website’s visual content. This project provides a smooth experience. This allows users to easily navigate images or information. JavaScript-powered slideshows bring a modern and dynamic feel to websites. This makes it a great choice for a portfolio. Product display and gallery with additional automation functionality and arrow navigation This slideshow ensures that users remain engaged without having to interact manually. and enable control over Intuitive arrow navigation
Key Features Of Slideshow
- Responsive Design: adapts to different screen sizes. smoothly To ensure compatibility across mobile devices, tablets, and desktops.
- Arrow Navigation: Left and right arrows help users navigate slides on their own. This allows for full navigation control.
- Autoplay Functionality: The slideshow automatically advances through the slides. Keep users engaged without needing to interact.
- Looping Effect: When the user reaches the end of the slide. The loop effect creates a continuous flow. Make this experience smooth.
- Dot Indicators: Shows navigation points at the bottom of the slideshow. It allows users to quickly determine their current position in the sequence and jump between slides.
Resources Of Slideshow
- Technology: HTML, CSS, Javascript
- External Resources: Remix Icon
- Responsive: Yes
Related Content You Might Enjoy
- Ultimate Guide: Slideshow with JavaScript with Arrows
- Create An Image Carousel with HTML, CSS & JavaScript
- Next.js Hero Section Template: A Complete Tutorial
- How to Use JS Slider for Each Slide To Remove Active Efficiently
- Top 13 Slick Slider Examples for Modern Web Design
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>background image slider with arrows</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="slider">
<div class="list">
<div class="item">
<div class="content">
<h2>slider 01</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
fugiat, dignissimos molestiae, porro odit, quas praesentium nobis
ab similique error reprehenderit possimus laboriosam minus saepe.
</p>
<button>read more</button>
</div>
<img
src="https://i.postimg.cc/SR9G4nCW/ai-generated-8644732-1280.jpg"
alt="slider image1"
/>
</div>
<div class="item">
<div class="content">
<h2>slider 02</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
fugiat, dignissimos molestiae, porro odit, quas praesentium nobis
ab similique error reprehenderit possimus laboriosam minus saepe.
</p>
<button>read more</button>
</div>
<img
src="https://i.postimg.cc/vmDfM1dc/avenue-815297-1280.jpg"
alt="slider image2"
/>
</div>
<div class="item">
<div class="content">
<h2>slider 03</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
fugiat, dignissimos molestiae, porro odit, quas praesentium nobis
ab similique error reprehenderit possimus laboriosam minus saepe.
</p>
<button>read more</button>
</div>
<img
src="https://i.postimg.cc/0QwSMLjv/bird-8788491-1280.jpg"
alt="slider image3"
/>
</div>
<div class="item">
<div class="content">
<h2>slider 04</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
fugiat, dignissimos molestiae, porro odit, quas praesentium nobis
ab similique error reprehenderit possimus laboriosam minus saepe.
</p>
<button>read more</button>
</div>
<img
src="https://i.postimg.cc/tRnkWMwY/nature-7175030-1280.jpg"
alt="slider image4"
/>
</div>
<div class="item">
<div class="content">
<h2>slider 05</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
fugiat, dignissimos molestiae, porro odit, quas praesentium nobis
ab similique error reprehenderit possimus laboriosam minus saepe.
</p>
<button>read more</button>
</div>
<img
src="https://i.postimg.cc/8cg6htf6/road-1072821-1280.jpg"
alt="slider image5"
/>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="ri-arrow-left-line"></i></button>
<button id="next"><i class="ri-arrow-right-line"></i></button>
</div>
<ul class="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
* {
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
box-sizing: border-box;
list-style: none;
font-family: "Rubik", serif;
}
body {
position: relative;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #edf2fb;
}
.slider {
width: 1300px;
max-width: 100vw;
height: 700px;
margin: auto;
position: relative;
overflow: hidden;
border-radius: 5px;
}
.slider .list {
position: absolute;
width: max-content;
height: 100%;
left: 0;
top: 0;
display: flex;
transition: 1s ease;
}
.slider .list img {
width: 1300px;
max-width: 100vw;
height: 100%;
object-fit: cover;
}
.slider .buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding-inline: 2rem;
z-index: 200;
}
.slider .buttons button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(134, 131, 131, 0.5);
color: #fff;
border: none;
cursor: pointer;
}
.slider .buttons button i {
font-size: 1.2rem;
}
.slider .dots {
position: absolute;
bottom: 10px;
left: 0;
color: #fff;
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.slider .dots li {
list-style: none;
width: 10px;
height: 10px;
background-color: #fff;
margin: 10px;
border-radius: 20px;
transition: 0.5s;
}
.slider .dots li.active {
width: 30px;
}
.item{
position: relative;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
color: #f5ebe0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.5rem;
}
.content h2 {
font-size: calc(1.3rem + 2.5vw);
text-transform: capitalize;
font-weight: 900;
}
.content p{
width: 50%;
text-align: center;
font-size: 1.1rem;
line-height: 25px;
}
.content button{
padding: 1rem 2rem;
text-transform: uppercase;
border: 2px solid #f5ebe0;
border-radius: 5px;
background-color: transparent;
color: #f5ebe0;
}
@media screen and (max-width: 768px) {
.slider {
height: 400px;
width: 95%;
}
.content p{
width: 80%;
}
}
const slider = document.querySelector(".slider .list");
const items = document.querySelectorAll(".slider .list .item");
const next = document.getElementById("next");
const prev = document.getElementById("prev");
const dots = document.querySelectorAll(".slider .dots li");
let active = 1; // Start at the first real slide (after clone)
let autoSlide;
// Clone the first and last items to create an infinite loop effect
const firstClone = items[0].cloneNode(true);
const lastClone = items[items.length - 1].cloneNode(true);
slider.appendChild(firstClone);
slider.insertBefore(lastClone, items[0]);
// Adjust active slides
const totalItems = items.length + 2;
// Set initial position to show the first actual slide
function initializeSlider() {
slider.style.transform = `translateX(-${items[0].offsetWidth}px)`;
startAutoSlide();
}
// Update slider position based on the active slide
function setSliderPosition() {
slider.style.transition = "transform 0.5s ease";
slider.style.transform = `translateX(-${active * items[0].offsetWidth}px)`;
updateActiveDot();
}
// Update the active dot indicator
function updateActiveDot() {
const realIndex = (active - 1 + dots.length) % dots.length;
document.querySelector(".slider .dots li.active").classList.remove("active");
dots[realIndex].classList.add("active");
}
// Navigate to the next slide with continuous looping
function nextSlide() {
active++;
setSliderPosition();
if (active === totalItems - 1) {
setTimeout(() => {
slider.style.transition = "none";
active = 1;
slider.style.transform = `translateX(-${items[0].offsetWidth}px)`;
}, 500);
}
}
// Navigate to the previous slide with continuous looping
function prevSlide() {
active--;
setSliderPosition();
if (active === 0) {
setTimeout(() => {
slider.style.transition = "none";
active = totalItems - 2;
slider.style.transform = `translateX(-${
active * items[0].offsetWidth
}px)`;
}, 500);
}
}
// Restart auto-slide interval
function restartAutoSlide() {
clearInterval(autoSlide);
startAutoSlide();
}
// Start the auto-slide interval
function startAutoSlide() {
autoSlide = setInterval(nextSlide, 5000);
}
// Attach event listeners
next.addEventListener("click", () => {
nextSlide();
restartAutoSlide();
});
prev.addEventListener("click", () => {
prevSlide();
restartAutoSlide();
});
dots.forEach((dot, index) => {
dot.addEventListener("click", () => {
active = index + 1;
setSliderPosition();
restartAutoSlide();
});
});
// Adjust slider position on window resize
window.addEventListener("resize", () => {
slider.style.transition = "none";
setSliderPosition();
});
// Initialize the slider on page load
initializeSlider();
Code & Preview
You can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Edit With Codepen button below.
