I have made a project in which Firstly i import card component using bootstrap and put some images there. Give them a center tag. In script.js I give button to function like whenever i click on right button it switch to next and vice verse. But when ever i amclicking on any button images are going downward instead of staying up there in a fixed position. Problem is that whenever i click the images it goes downward and again downward.
https://codepen.io/mohit-04/pen/abWPwPq
When you click the button images go down and if again then even more down I want to keep up in centre between the button
INDEX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<center>
<h1>Hello</h1>
<br />
<br />
<div class="carousel" data-carousel>
<button
class="carousel-button next"
data-carousel-button="next"
data-carousel-button
>
⇝
</button>
<button
class="carousel-button prev"
data-carousel-button="prev"
data-carousel-button
>
⇜
</button>
<ul data-slides>
<li class="slide" data-active>
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1644982647531-daff2c7383f3?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1653491888857-6cb8c8f0264c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1625215081436-85323ed5042c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1653597859079-bc6d0e9101de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1653604212161-b50f445f7987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0M3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
</ul>
</div>
</center>
</body>
</html>
STYLE
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-image: url("a.avif");
background-repeat: no-repeat;
background-size: cover;
}
.carousel {
width: 100vw;
height: 100vh;
position: relative;
}
.slide {
/* position: absolute; */
inset: 0;
opacity: 0;
}
.slide > img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
.carousel > ul {
margin: 0;
padding: 0;
list-style: none;
}
.slide[data-active] {
opacity: 1;
}
.carousel-button {
position: absolute;
z-index: 2;
background: none;
border: none;
font-size: 4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
border-radius: 0.25rem;
padding: 0 0.5rem;
background-color: rgba(0, 0, 0, 0.1);
}
.carousel-button:hover,
.carousel-button:focus {
color: purple;
background-color: rgba(0, 0, 0, 0.2);
}
.carousel-button:focus {
outline: 1px solid black;
}
.carousel-button.prev {
left: 24rem;
}
.carousel-button.next {
right: 24rem;
}
SCRIPT
// taking ids
const button = document.querySelectorAll("[data-carousel-button]");
// looping though next and prev button means
// ** LOGIC **
// storing all the images in array and then if we click the
// left arrow then it will go to -1 and if right then +1
//through this it will navigate through each images using index of images
button.forEach((button) => {
// function which check which button is gonna be clicked
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1;
// to navigate closest parent element making a loop in ul tag to navigate each li
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]");
// just checking which slide means li has data active tag
const activeSlide = slides.querySelector("[data-active]");
// extracting all the li in array
// getting the active slide and + offset means what we have to do means either +1 or -1
let newIndex = [...slides.children].indexOf(activeSlide) + offset;
// if it comes to last element and again user click left then it automatically goes to last element
if (newIndex < 0) newIndex = slides.children.length - 1;
if (newIndex >= slides.children.length) newIndex = 0;
// adding .active to that slide and removeing data-active to the previous one
slides.children[newIndex].dataset.active = true;
delete activeSlide.dataset.active;
});
});