As I embark on my journey in programming and work on creating my own website using Kirby, I encountered a challenge. I attempted to integrate a carousel slider into my website following a tutorial at https://youtu.be/9HcxHDS2w1s. Despite meticulously replicating the steps outlined in the tutorial, I faced an issue where the arrows for navigating the slides were unresponsive. The rest of the carousel appears to be functioning correctly, leaving me to suspect that the problem lies with the links.
Here's the HTML code:
<div class="carousel-h" data-carousel>
<button class="carousel-button-h prev-h" data-carousel-button="prev-h">
<img src="<?= url('assets/icons/button-prev.svg') ?>"></button>
<button class="carousel-button-h next-h" data-carousel-button="next-h">
<img src="<?= url('assets/icons/button-next.svg') ?>">
</button>
<ul data-slides>
<li class="slide-h" data-active>
<img src="images/Fokuss_Poster_web.jpg" alt="">
</li>
<li class="slide-h">
<img src="images/Rebooth_mockup_prints_web.jpg" alt="">
</li>
<li class="slide-h">
<img src="images/Kushim_Thumbnail_web.jpg" alt="">
</li>
<li class="slide-h">
<img src="images/Savo_Mockup_web.jpg" alt="">
</li>
<li class="slide-h">
<img src="images/Foto_Zine_2Sem_12-web.jpg" alt="">
</li>
<li class="slide-h">
<img src="images/Subspace_Mockup_web_0.jpg" alt="">
</li>
<li class="slide-h">
<img src="images/Zeitung_Vision_06-web.jpg" alt="">
</li>
</ul>
</div>
</section>
This is the JavaScript code:
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length -1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})
And here is the CSS code:
.carousel-h {
width: 100vw;
height: 100vh;
position: relative;
}
.carousel-h > ul {
margin: 0;
padding: 0;
list-style: none;
}
.slide-h {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide-h > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slide-h[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
.carousel-button-h {
position: absolute;
background: transparent;
z-index: 999;
border: none;
font-size: 3rem;
top: 50%;
transform: translateY(-50%);
color: rgba(0, 0, 0, 1);
border-radius: .25rem;
padding: 0 .5rem;
}
.carousel-button-h.prev-h {
left: 1rem;
}
.carousel-button-h.next-h {
right: 1rem;
}
I have tried replacing the arrow images from the tutorial with alternate SVG icons but to no avail. Even employing the HTML code snippets for arrows from toptal did not resolve the issue. Despite my efforts to identify the error, I remain unable to pinpoint it, seeking assistance and guidance. Thank you!