carousal-handler
v1.0.2
Published
Creates a functioning image carousal
Downloads
22
Readme
Carousal Handler
carousalHandler function takes in 6 argunemts that are references for:
- the carousal container
- leftArrow
- rightArrow
- an array of images to slide
- interval to auto change image
- an array of dot sliders
example html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>drop down</title>
</head>
<body>
<div class="carousel">
<button class="left-arrow carousel-click">←</button>
<div class="dot-slider">
<button class="carousel-click selected-dot" data-index="0"></button>
<button class="carousel-click" data-index="1"></button>
<button class="carousel-click" data-index="2"></button>
<button class="carousel-click" data-index="3"></button>
<button class="carousel-click" data-index="4"></button>
</div>
<div class="image-frame">
<div class="show-image"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<button class="right-arrow carousel-click">→</button>
</div>
</body>
</html>example CSS
position: relative;
display: flex;
width: 55vw;
margin: auto;
border: 2px solid black;
align-items: center;
}
.dot-slider {
position: absolute;
width: 30%;
height: 30px;
bottom: 10px;
right: 0;
left: 0;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.selected-dot {
background-color: rgb(0, 0, 0, 0.5);
}
.dot-slider > button {
padding: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 0;
box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.5);
}
.dot-slider > button:hover {
box-shadow: 0px 0px 10px 5px rgb(0, 0, 0, 0.8);
}
.image-frame {
margin: auto;
width: 50vw;
aspect-ratio: 16/9;
background-color: rebeccapurple;
}
.image-frame > div {
display: none;
width: 100%;
height: 100%;
}
.image-frame > :nth-child(1) {
background-color: aquamarine;
}
.image-frame > :nth-child(2) {
background-color: beige;
}
.image-frame > :nth-child(3) {
background-color: cadetblue;
}
.image-frame > :nth-child(4) {
background-color: tomato;
}
.image-frame > :nth-child(5) {
background-color: darkorchid;
}
.image-frame .show-image {
display: block;
}