CodePen Embed - Javascript Slider

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/a9aac57535.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|Cairo|Comfortaa">
    <title>Javascript slider</title>
</head>
<body>
    <div class="page_section">
        <div class="slider_container">
            <div class="slider_header">
                <span>Javascript Slider</span>
                <span>Created by Drinkoron73</span>
            </div>
            <div class="slider">
                <div class="slides_container">
                    
                </div>
                <div class="button_left"><i class="fas fa-angle-left"></i></div>
                <div class="button_right"><i class="fas fa-angle-right"></i></div>
                <div class="navigation">
                    <span class="navAnimatedBlock"></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

* {
    margin:0;
    padding:0;
}

span {
    font-family: 'Lobster', Helvetica;
}
  
.page_section {
    height:100vh;
    background-color:#1b1f24;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider_header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slider_header > span:nth-child(1){
    font-size: 32px;
    color: white;
}

.slider_header > span:nth-child(2){
    color: #0055c4;
}

@keyframes showContainer{
    0% {opacity:0}
    100% {opacity:100%}
}

.slider_container {
    animation-name: showContainer;
    animation-duration: 5s;
}

.slider_container .slider {
    width:90vw;
    height:80vh;
    max-width: 680px;
    max-height:420px;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}

.slides_container {
    position: absolute;
    height:100%;
    position: relative;
    transition: ease 1s;
}

.slides_container .slide{
    position: absolute;
    height:100%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 32px;
    font-weight: 300;
    font-family: 'Comfortaa';
}

.slider .button_right, .slider .button_left {
    position: absolute;
    top:50%;
    height:30px;
    width:30px;
    background-color:white;
    transform: translate(0, -50%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0055c4;
    font-size: 24px;
    font-weight: 300;
    transition: ease 0.5s;
}

.slider .button_right:hover, .slider .button_left:hover {
    cursor: pointer;
    transform: translate(0, -50%) scale(1.2);
    transition: ease 0.5s;
    color: white;
    background-color:#0055c4;
}

.slider .button_right {
    right:10px;
}

.slider .button_left {
    left:10px;
}

.slider .navigation {
    position: absolute;
    bottom:10px;
    left: 50%;
    transform: translate(-50%, 0);   
}

.slider .navigation .nav_element{
    width:10px;
    height:10px;
    border-radius: 50%;
    background-color: white;
    margin:0 5px;
    float: left;
    display: block;
}

.slider .navigation .navAnimatedBlock{
    position: absolute;
    background-color: #0055c4;
    margin:0 5px;
    width:10px;
    height:10px;
    box-shadow: 0 0 1px 1px #0055c4;
    border-radius: 20px;
}

.slider .navigation .nav_element:hover {
  cursor:pointer;
}

window.onload = function(){
    const slides_count = 5;
    let startFrom = 1; 
    let colors_list = new this.Array('#ff7f50','#ff6666','#4ca3dd','#66cdaa','#ffc3a0')
    let slider_button_left = $('.button_left:eq(0)');
    let slider_button_right = $('.button_right:eq(0)');
    let slides_container = $('.slides_container:eq(0)');
    let slide_width = slides_container.css('width');
    let slide_height = slides_container.css('height');
    let slider_navigation = $('.navigation:eq(0)');

    for(let i = 0; i < slides_count; i++){
        newElement = document.createElement('div');
        newElement.classList = 'slide';
        slides_container.append(newElement);
        slides = $('.slide');
        slides.eq(i).html('slide ' + (i+1));
        slides.eq(i).css({'background-color':colors_list[i], 'left':i*parseFloat(slide_width)+'px'});
    }

    for(let i = 0; i < slides_count; i++){
        newElement = document.createElement('span');
        newElement.classList = 'nav_element';
        slider_navigation.append(newElement);
    }

    let slider_navElements = $('.navigation:eq(0) .nav_element');
    let slider_navAnimatedBlock = $('.navigation:eq(0) .navAnimatedBlock:eq(0)');
    let navElementsCount = slider_navElements.length;

    function slideFunction(to){
        slides_container.css({'right':parseFloat(slide_width)*(to-1)+'px'})
    }

    let curentSlide = startFrom;

    slideFunction(startFrom);

    function navAnimation(from, to){
        slider_navElement_width = parseFloat(slider_navElements.css('width'));
        slider_navElement_margin = parseFloat(slider_navElements.css('margin-left'));

        if(from < to){
            animatedBoxSize = (Math.abs(from-to) * slider_navElement_margin * 2) + slider_navElement_width * (Math.abs(from-to)+1) + 'px';
            slider_navAnimatedBlock.animate({'width':animatedBoxSize}, 200);
            slider_navAnimatedBlock.animate({'width':slider_navElement_width, 'left':(to-1)*2*slider_navElement_width+'px'}, 200)
        }

        if(from > to){
            animatedBoxSize = (Math.abs(from-to) * slider_navElement_margin * 2) + slider_navElement_width * (Math.abs(from-to)+1) + 'px';
            slider_navAnimatedBlock.animate({'width':animatedBoxSize, 'left':(to-1)*2*slider_navElement_width+'px'}, 200);
            slider_navAnimatedBlock.animate({'width':slider_navElement_width}, 200)
        }
    }    

    slider_button_left.on( "click",  (function(){
        console.log(curentSlide);
        tempSlide = curentSlide;
        if(curentSlide==1)
            curentSlide = slides_count;
        else {
            curentSlide--;
        }
        slideFunction(curentSlide);
        navAnimation(tempSlide, curentSlide, false);
    }))

    slider_button_right.on( "click",  (function(){
        console.log(curentSlide);
        tempSlide = curentSlide;
        if(curentSlide == slides_count)
            curentSlide = 1;
        else {
            curentSlide++;
        }
        slideFunction(curentSlide);
        navAnimation(tempSlide, curentSlide, true);
    }))

    slider_navElements.on("click", (function(){
        navAnimation(curentSlide, slider_navElements.index(this)+1)
        curentSlide = slider_navElements.index(this)+1;
        slideFunction(curentSlide);
    }))
  var t = setInterval(function(){
        tempSlide = curentSlide;
        if(curentSlide == slides_count)
            curentSlide = 1;
        else {
            curentSlide++;
        }

        navAnimation(tempSlide, curentSlide)
        slideFunction(curentSlide);
    }, 5000)

}

This Pen is owned by Drinkoron73 on CodePen.

See more by @drinkoron73 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.