Submitted 7 months ago

Coding bootcamp testimonials slider with SCSS

MarieG41• 210

@MarieG41

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Coding bootcamp testimonials slider

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

I'd like some help for the Javascript part. I can make the second slider appear and the first one disappear, but I can't make the first one appear again.

const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const testimonialOne = document.querySelector('.One');
const testimonialTwo =document.querySelector('.testimonial-2');

function nextTest() {
        next.addEventListener('click', function() {
        testimonialTwo.classList.remove('hidden');
        testimonialOne.classList.add('hidden');
    })
}
function PreviousTest() {
    prev.addEventListener('click', function() {
        testimonialTwo.classList.add('hidden');
        testimonialOne.classlist.remove('hidden');
    }) 
}

nextTest();
PreviousTest();

Community feedback

visualdennis• 8,375

@visualdenniss

Posted 4 months ago

Salut Marie,

first of all, there is a typo inside ur second func: testimonialOne.classlist.remove('hidden'); it should be classList, which causes the problems.

Secondly there is no need to wrap ur eventlisteners into a function just to call them. Also, it's better practice to set up your event listeners outside of the function definitions, ensuring they are added when the DOM is fully loaded, smth like so:

const prev = document.querySelector(".prev"); const next = document.querySelector(".next"); const testimonialOne = document.querySelector(".One"); const testimonialTwo = document.querySelector(".testimonial-2");

function nextTest() { testimonialTwo.classList.remove("hidden"); testimonialOne.classList.add("hidden"); }

function previousTest() { testimonialTwo.classList.add("hidden"); testimonialOne.classList.remove("hidden"); }

// Set up event listeners

next.addEventListener("click", nextTest);

prev.addEventListener("click", previousTest);

Hope this helps! :)

Marked as helpful

MarieG41• 210

@MarieG41

Posted 4 months ago

@visualdenniss thank you very much for your help. My code is working!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord