carousel.js

function carousel(carouselClass, timer){

    // variable initialization
    var timerID,
    firstBullet,
    classActive = 'is-active',
    slidesArr = [],
    height = [],
    width = [];

    $(carouselClass).children('img').wrap('<div class="carousel-slide">');
    slideClass = $('.carousel-slide');

    // make slides position absolute to overlay each other
    $(slideClass).css('position', 'absolute');

    // take max-width&max-heigth of images in carousel for carousel & carousel container
    imgs = $(slideClass).children('img');
    $(imgs).each(function(){
        height = $(this).height();
        width = $(this).width();
    });

    // function makes arrow from group of elements
    function makeArrFromEl(el){
        var arr = [];
        $(el).each(function(){
            arr.push($(this));
        })
        return arr;
    }
    slidesArr = makeArrFromEl(slideClass);

    // create carousel-container & set width for it
    $(carouselClass).css('position', 'relative').wrap('<div class="carousel-container">');
    $('.carousel-container').width(Math.max(width));

    // set heigth of carousel & create bullets of slides
    $(carouselClass).height(Math.max(height)).after('<nav class="carousel-bullets">');
    for(var i = 0; i < slidesArr.length; i++ )
        $('.carousel-bullets').append('<button class="bullet" data-slide="' + i + '">' + ((+i) + 1))
    bulletClass = $('.bullet');

    // create next/prev triggers
    $('.carousel-bullets').after('<div class="carousel-triggers"><button class="prev">Prev<button class="next">Next');

    // switcher slides by clicking on bullets
    $(bulletClass).on('click', function(){
        var $this = $(this);
        var activeSlide;
        clearInterval(timerID);
        $this.addClass(classActive);
        activeSlide = $(slideClass).eq($this.attr('data-slide'));
        activeSlide.addClass(classActive).fadeIn(1000);
        activeSlide.siblings(slideClass).fadeOut(1000).removeClass(classActive);
        $this.siblings(bulletClass).removeClass(classActive);
        autoSwitch();
    });

    function makeButtonDisable(){
        setTimeout(function(){
            $(carouselClass).children('button').hide();
        }, 500);
        // $(carouselClass).children('button').show();
    };

    // make active the first bullet
    firstBullet = bulletClass.first();
    if(!$(bulletClass).hasClass(classActive)) $(firstBullet).click();

    function switchSlides(cond){
        var activeBullet = $('.bullet.is-active');
        if(cond === 'next') {
            if($(bulletClass).last().hasClass(classActive)) {
                setTimeout(function(){
                    $(firstBullet).click();
                });
            };
            $(activeBullet).next().click();
        } else if(cond === 'prev') {
            if($(bulletClass).first().hasClass(classActive)) {
                setTimeout(function(){
                    $(bulletClass).last().click();
                });
            };
            $(activeBullet).prev().click();
        };
    };

    // auto switch slides
    function autoSwitch(){
        timerID = setInterval(function(){
            switchSlides('next');
        }, timer); // time interval
    };

    // click NEXT trigger
    $('.next').on('click', function(){
        clearInterval(timerID);
        switchSlides('next');
    });

    // click PREV trigger
    $('.prev').on('click', function(){
        clearInterval(timerID);
        switchSlides('prev');
    });

};

index.html

<div class="carousel">
	<img src="imgs/cover1.jpg" alt="">
	<img src="imgs/cover2.jpg" alt="">
	<img src="imgs/cover3.jpg" alt="">
	<img src="imgs/cover4.jpg" alt="">
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/carousel.js"></script>

<script>
	carousel('.carousel', 4000);
</script>