script.js

// Slider
let slider = document.querySelector('.slider .list');
let items = document.querySelectorAll('.slider .list .item');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let dots = document.querySelectorAll('.slider .dots li');

let lengthItems = items.length - 1;
let active = 0;

next.onclick = function () {
    active = active + 1 <= lengthItems ? active + 1 : 0;
    reloadSlider();
}

prev.onclick = function () {
    active = active - 1 >= 0 ? active - 1 : lengthItems;
    reloadSlider();
}

let refreshInterval = setInterval(() => { next.click() }, 3000);

function reloadSlider() {
    slider.style.left = -items[active].offsetLeft + 'px';
    // 
    let last_active_dot = document.querySelector('.slider .dots li.active');
    last_active_dot.classList.remove('active');
    dots[active].classList.add('active');

    clearInterval(refreshInterval);
    refreshInterval = setInterval(() => { next.click() }, 3000);


}

dots.forEach((li, key) => {
    li.addEventListener('click', () => {
        active = key;
        reloadSlider();
    })
})

window.onresize = function (event) {
    reloadSlider();
};


// Menu
document.querySelector('#menu').addEventListener('click', () => {
    document.querySelector('#menu').classList.toggle('active')
});

document.querySelector('#menu').addEventListener('click', () => {
    document.querySelector('#nav-links').classList.toggle('menu-active')
});


// FAQs
const qa = document.querySelectorAll('.qa');

qa.forEach(qa => {
    const answer = qa.querySelector('.answer');
    const arrow = qa.querySelector('.arrow');

    qa.addEventListener('click', () => {
        arrow.classList.toggle('qa-active');
        answer.classList.toggle('qa-active');
    })
})