THE HTML part
<body>
<h1>The Image Slider</h1>
<div class="slider">
<div class="slides">
<img src="https://images.pexels.com/photos/355321/pexels-photo-355321.jpeg?cs=srgb&dl=pexels-pixabay-355321.jpg&fm=jpg" alt="Photo 1" />
</div>
<div class="slides">
<img src="https://images.pexels.com/photos/1546166/pexels-photo-1546166.jpeg?cs=srgb&dl=pexels-david-mcbee-1546166.jpg&fm=jpg" alt="Photo 2" />
</div>
<div class="slides">
<img src="https://images.pexels.com/photos/853199/pexels-photo-853199.jpeg?cs=srgb&dl=pexels-artem-beliaikin-853199.jpg&fm=jpg" alt="Photo 3" />
</div>
<div class="slides">
<img src="https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?cs=srgb&dl=pexels-pixabay-33545.jpg&fm=jpg" alt="Photo 4" />
</div>
<div class="slides">
<img src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg?cs=srgb&dl=pexels-eberhard-grossgasteiger-443446.jpg&fm=jpg" alt="Photo 5" />
</div>
<div class="slides">
<img src="https://images.pexels.com/photos/1287460/pexels-photo-1287460.jpeg?cs=srgb&dl=pexels-asad-photo-maldives-1287460.jpg&fm=jpg" alt="Photo 6" />
</div>
<div class="slides">
<img src="https://images.pexels.com/photos/1643389/pexels-photo-1643389.jpeg?cs=srgb&dl=pexels-vecislavas-popa-1643389.jpg&fm=jpg" alt="Photo 7" />
</div>
<button class="btn btn__left">←</button>
<button class="btn btn__right">→</button>
<div class="dots"></div>
</div>
</body>
The css part
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: rgb(122, 184, 255);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
sans-serif;
background: url(https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?cs=srgb&dl=pexels-moose-photos-1037992.jpg&fm=jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
h1 {
text-align: center;
}
.slider {
position: relative;
max-width: 80%;
height: 35vmax;
box-shadow: 5px 10px 20px 10px grey;
margin: 20px auto;
overflow: hidden;
top: 0;
}
.slides {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
transition: transform 1.3s ease;
}
.slides > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.btn {
width: 60px;
height: 60px;
z-index: 10;
position: absolute;
text-align: center;
background-color: transparent;
border: none;
font-size: 3em;
font-weight: 1000;
cursor: pointer;
color: rgb(253, 139, 139);
}
.btn__left {
position: absolute;
transform: translate(-50%, -50%);
left: 6%;
top: 45%;
}
.btn__right {
position: absolute;
transform: translate(50%, -50%);
right: 6%;
top: 45%;
}
.btn:hover {
color: lightblue;
}
.dots {
position: absolute;
left: 40%;
bottom: 5%;
display: flex;
}
.dot {
width: 0.9vmax;
height: 0.9vmax;
border-radius: 50%;
border: none;
margin-right: 5px;
transition: all 0.7s ease;
top: 80%;
background-color: lightblue;
margin-right: 1.5rem;
}
.dot__active {
background-color: rgb(253, 139, 139);
}
@media only screen and (max-width: 689px) {
.slider {
width: 100%;
height: 35%;
}
.dots {
left: 25%;
}
.btn {
font-size: 1.8rem;
}
}
@media only screen and (max-width: 400px) {
h1 {
font-size: 1.7rem;
}
.slider {
width: 100%;
height: 20%;
}
.dots {
left: 13%;
}
} ;
The js part
const slider = document.querySelector(".slider");
const slides = document.querySelectorAll(".slides");
const btnLeft = document.querySelector(".btn__left");
const btnRight = document.querySelector(".btn__right");
const dotContainer = document.querySelector(".dots");
let curSlide = 0;
let maxSlide = slides.length - 1;
const createNewdots = function () {
slides.forEach((_, i) => {
dotContainer.insertAdjacentHTML(
"beforeend",
`<button class="dot" data-slide="${i}"></button>`
);
});
};
// moving logic
const slideMover = function (curSlide) {
slides.forEach((s, i) => {
s.style.transform = `translate(${100 * (i - curSlide)}%)`;
});
};
// Active dot logic
const dotActive = function (curr) {
document.querySelectorAll(".dot").forEach((s, i) => {
s.classList.remove("dot__active");
});
document
.querySelector(`.dot[data-slide="${curr}"]`)
.classList.add("dot__active");
curSlide = curr;
};
// sliding forward
const nextSlide = function () {
if (curSlide == maxSlide) {
curSlide = 0;
} else {
curSlide++;
}
slideMover(curSlide);
dotActive(curSlide);
};
// sliding backward
const prevSlide = function () {
if (curSlide == 0) {
curSlide = maxSlide;
} else {
curSlide--;
}
slideMover(curSlide);
dotActive(curSlide);
clearInterval(automatic);
};
const initializer = function () {
slideMover(0);
createNewdots();
dotActive(0);
};
initializer();
btnRight.addEventListener("click", nextSlide);
btnRight.addEventListener("click", function () {
clearInterval(automatic);
});
btnLeft.addEventListener("click", prevSlide);
dotContainer.addEventListener("click", function (e) {
if (e.target.classList.contains("dot")) {
const clicked = e.target.dataset.slide;
slideMover(clicked);
dotActive(clicked);
clearInterval(automatic);
}
});
document .addEventListener("keydown",function(e){
console.log(e.key)
if(e.key==="ArrowRight"){
nextSlide()
clearInterval(automatic);
}
if (e.key==="ArrowLeft"){
prevSlide()
clearInterval(automatic);
}
})
// automatic sliding effect
const automatic = setInterval(() => {
nextSlide();
}, 2000);
html
- creating div having class "slider"
- inside slider div another div called slides each slides have the images
- creating buttons Left and Right
- creating div called dot
CSS
- giving height,width and overflow hidden, position to slider div
2.giving display flex,absolute to slide div
3.using media query made it to responsive
JS
1.using transform:translateX() we make the slide to move
2.implementing forward and backward sliding moment logics
3.creating dot buttons inside Dots container
4.giving dot button logics
Top comments (0)