플러그인없이 이미지 슬라이드

<div class="slide-box">
    <div class="slides">
        <a href="#" class="slide">
            <img src="../img/1.jpg" alt="" />
        </a>
        <a href="#" class="slide">
            <img src="../img/2.jpg" alt="" />
        </a>
        <a href="#" class="slide">
            <img src="../img/3.jpg" alt="" />
        </a>
    </div>
    <div class="slide-nav">
        <a href="#" class="prev"><i class="bi bi-chevron-left"></i></a>
        <a href="#" class="next"><i class="bi bi-chevron-right"></i></a>
    </div>
    <div class="slide-dot"></div>
</div>

 

var sCount = 3;
var sCurrent = 0;
var imgw = $(".slide").width();

var timer;
//하얀점넣고 클릭시
for (let i = 0; i < sCount; i++) {
    var dots = `<a href="#">${i}</a>`;
    $(".slide-dot").append(dots);
    $(".slide-dot a")
        .eq(i)
        .on("click", function (e, i) {
            e.preventDefault;
            if ($(e.currentTarget).hasClass("active")) {
                return;
            }
            sNext = $(e.currentTarget).index();
            gotoSlide(sNext);
            $(".slide-dot a").removeClass("active");
            $(e.currentTarget).addClass("active");
        });
}

function gotoSlide(sNext) {
    $(".slides .slide").fadeOut();
    $(".slides .slide").eq(sNext).fadeIn();
    $(".slide-dot a").removeClass("active");
    $(".slide-dot a").eq(sNext).addClass("active");
}
//이전 다음 버튼
$(".slide-nav .next").on("click", function () {
    sNext++;
    if (sNext == 3) {
        sNext = 0;
    }
    gotoSlide(sNext);
    sCurrent = sNext;
});

$(".slide-nav .prev").on("click", function () {
    sNext--;
    if (sNext == -1) {
        sNext = 2;
    }
    gotoSlide(sNext);
    sCurrent = sNext;
});

//타이머;
function sTimer() {
    timer = setInterval(function () {
        sNext++;
        if (sNext == 3) {
            sNext = 0;
        }
        gotoSlide(sNext);
        sCurrent = sNext;
    }, 4000);
}
function stopTimer() {
    clearInterval(timer);
}
$(".slide, .slide-nav").on("mouseenter", function () {
    stopTimer();
});
$(".slide, .slide-nav").on("mouseleave", function () {
    sTimer();
});
// 초기 세팅
$(".slide-dot a").eq(0).trigger("click");
sTimer();