I am very new to JavaScript.
My review slider works on the button to the right but when left is clicked and try to get from the first to the left last slide the review box disappears
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')
let activeSlide = 0
rightBtn.addEventListener('click', () => {
activeSlide++
if (activeSlide > slides.length - 1) {
activeSlide = 0
}
setActiveSlide()
})
leftBtn.addEventListener('click', () => {
activeSlide--
if (activeSlide > slides.length - 1) {
activeSlide = slides.length - 1
}
setActiveSlide()
})
function setActiveSlide() {
slides.forEach(slide => {
slide.classList.remove('active')
slide.classList.add('hide')
})
slides [activeSlide].classList.add('active')
slides [activeSlide].classList.remove('hide')
}<section class="section-recensies">
<div class="recensies container">
<h2>Recensies</h2>
<div class="slider-container">
<div class="recensie-box slide active">
<p class="recensie-tekst">Recensie</p>
<img src="{{ asset('images/logo/grace-business-group-lijn-met-kroon.png') }}"
alt="Logo Grace Business Group met lijn">
<p>
<span>Naam</span>
<span>Bedrijf</span>
</p>
</div>
<div class="recensie-box slide hide">
<p class="recensie-tekst">Recensie</p>
<img src="{{ asset('images/logo/grace-business-group-lijn-met-kroon.png') }}"
alt="Logo Grace Business Group met lijn">
<p>
<span>Naam</span>
<span>Bedrijf</span>
</p>
</div>
<div class="recensie-box slide hide">
<p class="recensie-tekst">Recensie</p>
<img src="{{ asset('images/logo/grace-business-group-lijn-met-kroon.png') }}"
alt="Logo Grace Business Group met lijn">
<p>
<span>Naam</span>
<span>Bedrijf</span>
</p>
</div>
<button class="recensie-button recensie-button-links" id="left"><</button>
<button class="recensie-button recensie-button-rechts" id="right">></button>
</div>
</div>
</section>I can’t see why it is not working because it does go to the left. When I click the right button the review box appears again.
Kaye is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
When clicking the right button, this logic checks if you’ve navigated past the last slide and resets to the first slide:
if (activeSlide > slides.length - 1) {
activeSlide = 0
}
And when clicking the left button, this logic checks if you’ve navigated past the last slide and resets to the last slide:
if (activeSlide > slides.length - 1) {
activeSlide = slides.length - 1
}
Navigating to the left will never exceed the right-most slide. Or, in math terms, if activeSlide is currently less than the highest value, decrementing it will never make it greater than the highest value.
You want to check if it’s less than the lowest value:
if (activeSlide < 0) {
activeSlide = slides.length - 1
}
As an aside, if you weren’t observing the error message before then now is a great time to start familiarizing yourself with your browser’s development/debugging tools. The browser console is where errors like this would be visible, and the script debugger can help you step through the code as it executes and observe the exact runtime values and behaviors.
3