I am trying to make a carousel for our company LMS homepage. I want it to automatically transition through each carousel item (the banner images) as well as have it so people can click buttons to navigate back or forward through the carousel items without breaking the automatic timer. I have the automatic slide transitioning working and I have the buttons built for manually navigating. I just can’t figure out how to make the buttons work.
I am not too experienced with Javascript and I am guessing that is what I need to get this all working. So, if anyone could help me figure this out, I’d be eternally grateful!
My entire code is below for reference:
<!DOCTYPE html>
<html>
<head>
<link tabindex="11" rel="preconnect" href="https://fonts.googleapis.com">
<link tabindex="11" rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link tabindex="11" href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
* {box-sizing: border-box}
body {
font-family: "Open Sans";
margin:0;
white-space: nowrap;
}
* {
margin: 0;
padding: 0;
}
.carousel_items {
display: flex;
overflow: hidden;
}
.carousel_item {
position: relative;
min-width: 100%;
max-width: 100%;
height: 200px;
transition: all 0.5s linear;
background-repeat: no-repeat;
background-size: cover;
}
.carousel_text {
color: #f2f2f2;
font-size: 4vh;
padding: 8px 12px;
position: absolute;
bottom: 70px;
width: 26%;
text-align: center;
background-color: none;
font-family: "Open Sans";
font-size: calc(1.5rem + 0.3vw);
}
.item1 {
background-image: url("https://images.unsplash.com/photo-1707218526479-91d005196060?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
.item2 {
background-image: url("https://images.unsplash.com/photo-1435527173128-983b87201f4d?q=80&w=2067&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
.item3 {
background-image: url("https://images.unsplash.com/photo-1523655223303-4e9ef5234587?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 10%;
width: auto;
padding-top: 30px;
padding-bottom: 30px;
padding-right: 15px;
padding-left: 15px;
margin-top: -40px;
color: white;
font-weight: bold;
font-size: calc(1.5rem + 0.3vw);
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel_items">
<div class="carousel_item item1">
<p class="carousel_text">Featured Training</p>
</div>
<div class="carousel_item item2">
<p class="carousel_text">Activity Calendar</p>
</div>
<div class="carousel_item item3">
<p class="carousel_text">Technical Learning</p>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)"><i class="material-icons">chevron_left</i></a>
<a class="next" onclick="plusSlides(1)"><i class="material-icons">chevron_right</i></a>
</div>
</body>
<script>
const carouselItems = document.querySelectorAll(".carousel_item");
let i = 1;
setInterval(() => {
Array.from(carouselItems).forEach((item,index) => {
if(i < carouselItems.length){
item.style.transform = `translateX(-${i*100}%)`
}
})
if(i < carouselItems.length){
i++;
}
else{
i=0;
}
},4000)
</script>
</html>
I’ve tried adding triggers to the buttons but I just am far too inexperienced with Javascript. Trying to implement other people’s javascript codes for navigation buttons was too hard to get to work as well. So, I never really got anywhere.
New contributor
Fourkings13 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1