Анимация слайдера используя setInterval

1.Имеется слайдер на чистом js. Нужно сделать анимацию, не используя translate, а использовать setInterval. Как реализовать? 2.Как сделать чтобы при клике вправо после последнего слайда появился первый, но не возвращаясь назад а как карусель показал первый.

window.addEventListener('DOMContentLoaded', function(){
    const sliderWrapper = document.querySelector('.slider-wrapper'),
        sliderInner = document.querySelector('.slider-inner'),
        slides = document.querySelectorAll('.slider-item'),
        slider = document.querySelector('.slider'),
        width = window.getComputedStyle(sliderWrapper).width,
        prev = document.querySelector('.prev'),
        next = document.querySelector('.next');

let slideIndex = 1,
    offset = 0;

sliderInner.style.width = 100 * slides.length + '%';
slides.forEach(item => {
    item.style.width = width;
});

const sliderDots = document.createElement('ol'),
      dots = [];
sliderDots.classList.add('slider-dots');
slider.append(sliderDots);

for ( let i = 0; i < slides.length; i++) {
    const dot = document.createElement('li');
    dot.setAttribute('data-slide-to', i + 1);
    dot.classList.add('dot');
    if(i == 0) {
        dot.style.opacity = 1;
    }
    sliderDots.append(dot);
    dots.push(dot);
}


next.addEventListener('click', function() {

    if (offset == +width.slice(0, width.length - 2) * (slides.length - 1)) {
        offset = 0;
    } else {
        offset += +width.slice(0, width.length - 2);
    }

    sliderInner.style.transform = `translateX(-${offset}px)`;

    if (slideIndex == slides.length) {
        slideIndex = 1;
    } else {
        slideIndex++;
    }

    dots.forEach(dot => {
        dot.style.opacity = '.5'
    });
    dots[slideIndex - 1].style.opacity = 1;
});

prev.addEventListener('click', function() {
    if (offset == 0) {
        offset = +width.slice(0, width.length - 2) * (slides.length - 1);
    } else {
        offset -= +width.slice(0, width.length - 2);
    }

    sliderInner.style.transform = `translateX(-${offset}px)`;

    if (slideIndex == 1) {
        slideIndex = slides.length;
    } else {
        slideIndex--;
    }

    dots.forEach(dot => {
        dot.style.opacity = '.5';
    });
    dots[slideIndex - 1].style.opacity = 1;
});

dots.forEach(dot => {
    dot.addEventListener('click', (e)=> {
        const slideTo = e.target.getAttribute('data-slide-to');

        slideIndex = slideTo;
        offset = +width.slice(0, width.length - 2) * (slideTo - 1);
        sliderInner.style.transform = `translateX(-${offset}px)`;

        dots.forEach(dot => {
            dot.style.opacity = '.5'
        });
        dots[slideIndex - 1].style.opacity = 1;
    });
});