Creating custom carousel using HTML, CSS & Vanilla Javascript

Create a custom carousel with fading effect using HTML, CSS & Vanilla Javascript. I have used the Font Awesome classes for control icons. There is some delay switching between the images when using controls.

HTML:-
<div class="carousel" data-interval-time="6500">
                <ul>
                    <li><img src="img/image1.jpg" alt="CarouselImage_1"/></li>
                    <li><img src="img/image2.jpg" alt="CarouselImage_2"/></li>
                    <li><img src="img/image3.jpg" alt="CarouselImage_3"/></li>
                    <li><img src="img/image4.jpg" alt="CarouselImage_4"/></li>
                    <li class="saver"></li>
                </ul>
                <div class="controls">
                    <ul>
                        <li class="img-prev"><span class="fa fa-backward"></span></li>
                        <li class="img-state"><span class="fa fa-pause" data-play-state="playing"></span></li>
                        <li class="img-next"><span class="fa fa-forward"></span></li>
                    </ul>
                </div>
                <div class="progress"></div>
</div>

CSS:-

.carousel{
    position: absolute;
    display: block;
    width: 100%;
    height: 390px;
    max-height: 410px;
    background: rgba(65, 65, 65, 1);
    padding: 1%;
    overflow: hidden;
}
.carousel>.progress{
    position: absolute;
    background: rgba(255, 255, 255, 1);
    width: 0;
    height: 5px;
    bottom: -15px;
    border-radius: 10px;
    margin-left: -1%;
    z-index: 1;
}
.carousel>.controls{
    position: absolute;
    background: rgba(0, 0, 0, 1);
    width: auto;
    max-width: 150px;
    border-radius: 10px;
    color: #FFF;
    bottom: 30px;
    z-index: 12;
    opacity: 0.25;
    transition: opacity 0.25s 0s ease;
    transition-property: all;
}
.carousel>.controls:hover{
    opacity: 1;
}
.carousel>.controls>ul{
    list-style: none;
}
.carousel>.controls>ul>li{
    padding: 10px;
    display: inline-block;
    transition: background 0.25s 0s ease;
    transition-property: all;
    cursor: pointer;
}
.carousel>.controls>ul>li:hover{
    background: rgba(80, 80, 80, 1);
    border-radius: 10px;
}
.carousel>ul{
    list-style: none;
}
.carousel>ul>li{
    position: absolute;
    width: 55%;
}
.carousel>ul>li>img{
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 350px;
    max-height: 350px;
    border-radius: 10px;
    opacity: 1;
    transition: opacity 0.65s 0s ease;
    transition-property: all;
}


Javascript:-

/**
 * This variable will store index of the current image shown on the carousel
 */
var currentIndex = 0;
/**
 * This variable will store index of the next image to show on the carousel
 */
var newIndex = 0;
/**
 * This variable will store the intervalID for the carousel. It is used to move forward, move backward and to pause or play the carousel
 */
var interval;
function carousel() {
    var images = $(".carousel").getElementsByTagName("img");
    var intval = $(".carousel").getAttribute("data-interval-time");
    $(".carousel .progress").style.transition = "width " + (intval / 1000) + "s 0s ease";
    $(".carousel .progress").style.transitionProperty = "all";
    $(".carousel .progress").style.width = "100%";
    newIndex = images.length - 1;
    images[currentIndex].style.opacity = "1";
    images[newIndex].style.opacity = "0";
    interval = setInterval(function () {
        switchImages(images);
    }, intval);
    $(".carousel .controls .img-next").onclick = function () {
        clearInterval(interval);
        currentIndex = newIndex;
        images[currentIndex].style.opacity = "0";
        newIndex++;
        newIndex = newIndex == images.length ? 0 : newIndex;
        images[newIndex].style.opacity = "1";
        interval = setInterval(function () {
            switchImages(images);
        }, intval);
    };
    $(".carousel .controls .img-prev").onclick = function () {
        clearInterval(interval);
        images[currentIndex].style.opacity = "0";
        newIndex = currentIndex - 1;
        newIndex = newIndex == -1 ? images.length - 1 : newIndex;
        currentIndex = newIndex;
        images[newIndex].style.opacity = "1";
        newIndex++;
        newIndex = newIndex == images.length ? 0 : newIndex;
        interval = setInterval(function () {
            switchImages(images);
        }, intval);
    };
    $(".carousel .controls .img-state").onclick = function () {
        var state = $(".carousel .controls .img-state span").getAttribute("data-play-state");
        if (state === "playing") {
            clearInterval(interval);
            $(".carousel .controls .img-state span").setAttribute("data-play-state", "paused");
            $(".carousel .controls .img-state span").setAttribute("class", "fa fa-play");
        }
        if (state === "paused") {
            if (interval) {
                clearInterval(interval);
            }
            interval = setInterval(function () {
                switchImages(images);
            }, intval);
            $(".carousel .controls .img-state span").setAttribute("data-play-state", "playing");
            $(".carousel .controls .img-state span").setAttribute("class", "fa fa-pause");
        }
    };
}
/**
 * This function switches between the images after a certain time interval.
 * @param {Array} list An array of DOMObject of the images to switch between.
 */
function switchImages(list) {
    $(".carousel .progress").style.width = $(".carousel .progress").style.width == "0px" ? "100%" : "0";
    list[currentIndex].style.opacity = "0";
    list[newIndex].style.opacity = "1";
    currentIndex = newIndex;
    newIndex++;
    newIndex = newIndex == list.length ? 0 : newIndex;
}