var time = null;


$(".next").onclick = () => {
    motion(-520)
}

$(".prev").onclick = () => {
    motion(520)
}

_(".dot li").forEach((v, i) => {
    v.onclick = function () {
        changeDot(i)
    }
});



function changeDot(index) {
    var liArr = _(".dot li")
    liArr.forEach((item) => {
        item.classList.remove("active")
    })
    liArr[index].classList.add("active")
    set_Left(index * -520)
}


function motion(offset) {
    var totalOffset = left() + offset

    if (totalOffset < -1040) {
        totalOffset = 0
    }
    if (totalOffset > 0) {
        totalOffset = -1040
    }
    set_Left(totalOffset)
    changeDot(totalOffset / -520)
}

function autoPlay() {
    time = setInterval(() => {
        $(".next").onclick()
    }, 1000);
}

$(".main").onmouseover = () => {
    clearInterval(time)
}

$(".main").onmouseout = () => {
    autoPlay()
}
autoPlay()

function set_Left(offset) {
    $(".swiper").style.left = `${offset}px`;
}

function left() {
    return parseInt($(".swiper").style.left)
}

function $(className) {
    return document.querySelector(className)
}

function _(className) {
    return document.querySelectorAll(className)
}