I am trying to add a carousel to my website on webflow and I have used to embed code feature. I have added the HTML, CSS and JavaScript all together because I’m not sure how to do that on seperate files in Webflow. I have also added 3 images to the carousel but when i publish the website and view it, the functionality of the carousel works but does not show the images. I have put down the path as: images/image1.jpg as that is what is used for other images. I have put down the path as: /images/image1.jpg as that is what is used for other images.
<head>
<meta charset="UTF-8">
<title>Simple Image Carousel</title>
<style>
.carousel {
position: relative;
width: 600px;
margin: auto;
overflow: hidden;
border: 1px solid #ddd;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
}
.carousel-item img {
width: 100%;
display: block;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.5);
border: none;
color: white;
font-size: 2em;
padding: 5px 10px;
cursor: pointer;
user-select: none;
}
.carousel-control.prev {
left: 10px;
}
.carousel-control.next {
right: 10px;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/image1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="/images/image2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="/images/image3.jpg" alt="Slide 3">
</div>
</div>
<button class="carousel-control prev" onclick="prevSlide()">❮</button>
<button class="carousel-control next" onclick="nextSlide()">❯</button>
</div>
<script>
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const totalItems = items.length;
function updateCarousel() {
items.forEach((item, index) => {
item.classList.remove('active');
if (index === currentIndex) {
item.classList.add('active');
}
});
const carouselInner = document.querySelector('.carousel-inner');
carouselInner.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
}
function nextSlide() {
currentIndex = (currentIndex + 1) % totalItems;
updateCarousel();
}
function prevSlide() {
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateCarousel();
}
</script>
</body>