Embedded Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Slider Example</title>
<style>
*{
margin: 0px;
box-sizing: border-box;
padding: 0px;
}
html {
font-size: 1rem;
}
body {
width: 100%;
height: 100%;
background-color: rgb(136, 0, 255);
padding: 15px;
}
h1 {
color: rgb(255, 242, 0);
margin-bottom: 30px;
}
.slider {
position: relative;
max-width: 45rem;
height: 25rem;
margin: 0 auto;
overflow: hidden;
}
.slide{
position: absolute;
top: 0;
width: 100%;
height: 25rem;
display: flex;
justify-content: center;
align-items: center;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
}
.bottom-container {
display: flex;
justify-content: space-between;
padding: 0px 20px;
margin-top: 30px;
}
.bottom-container button {
padding: 10px 30px;
background-color: rgb(255, 242, 0);
border: none;
font-size: 18px;
letter-spacing: 2px;
cursor: pointer;
}
.dots-container {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.dots-container .dot{
width: 40px;
height: 15px;
border-radius: 8px;
background-color: #ffffff;
cursor: pointer;
}
.dots-container .dot.active {
background-color: #000;
}
</style>
</head>
<body>
<h1>Image Slider Example</h1>
<div class="slider"></div>
<div class="bottom-container">
<button class="btn-slide prev">Left</button>
<div class="dots-container"></div>
<button class="btn-slide next">Next</button>
</div>
<script>
const slider = document.querySelector(".slider");
const dotsContainer = document.querySelector(".dots-container");
async function fetchListOfImages() {
try {
const response = await fetch(
"https://picsum.photos/v2/list?page=1&limit=10",
{
method: "GET",
}
);
const imagesList = await response.json();
if (imagesList && imagesList.length > 0) displayImages(imagesList);
} catch (error) {
console.log(error);
}
}
function displayImages(getImagesList) {
slider.innerHTML = getImagesList
.map(
(item) => `
<div class="slide">
<img src= ${item.download_url} alt=${item.id} />
</div>
`
)
.join(" ");
dotsContainer.innerHTML = getImagesList
.map(
(item, index) => `
<span class="dot ${index === 0 ? "active" : ""}" data-slide=${index}></span>
`
)
.join(" ");
}
fetchListOfImages();
// slider functionality begins
setTimeout(() => {
const slides = document.querySelectorAll(".slide");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
let currentSlide = 0;
function activeDot(slide) {
document
.querySelectorAll(".dot")
.forEach((dotItem) => dotItem.classList.remove("active"));
document
.querySelector(`.dot[data-slide="${slide}"]`)
.classList.add("active");
}
function changeCurrentSlide(currentSlide) {
slides.forEach(
(slideItem, index) =>
(slideItem.style.transform = `translateX(${
100 * (index - currentSlide)
}%)`)
);
}
changeCurrentSlide(currentSlide)
nextBtn.addEventListener("click", () => {
currentSlide++;
if (slides.length - 1 < currentSlide) {
currentSlide = 0;
}
changeCurrentSlide(currentSlide);
activeDot(currentSlide);
});
prevBtn.addEventListener("click", () => {
currentSlide--;
if (0 > currentSlide) {
currentSlide = slides.length - 1;
}
changeCurrentSlide(currentSlide);
activeDot(currentSlide);
});
dotsContainer.addEventListener("click", (event) => {
if(event.target.classList.contains('dot')){
const currentSlide = event.target.dataset.slide
changeCurrentSlide(currentSlide)
activeDot(currentSlide)
}
});
}, 1000);
</script>
</body>
</html>
Page updated
Google Sites
Report abuse