<body>
    <div class="slide-container unloaded">
        <div class="slide"> 
            <img class="first-image" src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" alt=""> 
            <img src="http://lorempixel.com/output/cats-q-c-640-480-8.jpg" alt="">                                       
            <img src="http://lorempixel.com/output/cats-q-c-640-480-3.jpg" alt="">  
            <img src="http://lorempixel.com/output/cats-q-c-640-480-7.jpg" alt="">
            <img src="http://lorempixel.com/output/cats-q-c-640-480-10.jpg" alt="">
        </div>

            <div class="slide_controls">
                <div class="prev-back">
                    <span class="perv">&#60;</span>
                </div>
                <div class="next-back" >
                  <span class="next">&#62;</span>                
                </div>
            </div>
     </div>
     <div class="loading">
         <span></span>
     </div>
@keyframes line{
    from{
        transform: scale(0);        
    }to{
        transform: scale(2rem);
    }
}
*{
    box-sizing: border-box;
}
html{
    width: 100%;
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #ffec0d;
}
.slide-container{
    position: relative;
    width: 60%;
    margin: 5vh auto;
    border-radius: .5rem;
    border: .618rem rgba(239, 154, 14, 0.53) solid;   
    overflow: hidden;
}
.slide{
    width:1000%;
    transition:all .5s ease;
    overflow: hidden; 
    img{
        width: 10%;
        height: auto;
        padding:0;
        margin:0;
        float: left;
    }
}
.unloaded {
    display: none;
     opacity: 0;
}
.slide_controls{
    position: absolute;
    top: 0;
    width: 100%;
    height: 150%;
    overflow: hidden;
    transition: all .5s ease;
    opacity: 1;
    .next-back{
        position: relative;
        top: 30%;
        margin-right: -5rem;
        float: right;
        transition: all .2s ease;
    }
    .prev-back{
        position: relative;
        margin-left: -5rem;
        top: 30%;
        float: left;
        transition: all .4s ease;
    }
    &:hover .next-back,  &:focus .next-back{
        margin-right: 1rem;
    }
    &:hover .prev-back, &:focus .prev-back{
        margin-left: 1rem;
    }
    span{
        font-family: sans-serif;
        font-size: 5vw;
        font-weight: 100;
        color:#ccc;
        text-shadow: 2px 5px rgba(0,0,0,0.4);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }
}
.loading{
    width: 6rem;
    margin: auto auto;
    margin-top: 20%;
    span{
        position: relative;
        display: block;
        width: 2rem;
        height: 2rem;
        opacity: .5;
        border-radius: 50%;
        transition: all .2s ease;
        
        &::before{
            position: absolute;
            top: -3rem;
            right: 4rem;
            display: block;
            content: " ";
            width: 2rem;
            height: 2rem;
            background-color:dodgerblue;
            border-radius: 50%;
            animation: line .7s  cubic-bezier(0.42, 0, 0, 2.43) infinite;
        }
         &::after{
            position: absolute;
            right: -2rem;
            display: block;
            content: " ";
            width: 2rem;
            height: 2rem;
            background-color:orange;
            border-radius: 50%;
            animation: line .7s cubic-bezier(0.42, 0, 0, 2.43) infinite;
            
        }

    }
}
.remove{
    display: none;
}
@media screen and (max-width:74em){
    .next-back{
        margin-right: 1rem !important;
    }
 .prev-back{
     margin-left: 1rem !important;  
   } 
.slide-container{
    position: relative;
    width: 80%;
    }
}
    //selectors
    const slide = document.querySelector('.slide');
    const imgAll = slide.querySelectorAll('img'); 
    const img = slide.querySelector('img'); 
    const nextBtn = document.querySelector('.next');
    const pervBtn = document.querySelector('.perv');

    // all images width 
    const last = Number(imgAll.length - 1)*10;

    // grab digit property of transform 
    function currentTransform(){
        console.log(slide.style.transform);
        if(slide.style.transform){
            var regex = /(\-|\+)?\d+/gi;
            return  Number(slide.style.transform.match(regex).join('')); 
        }
        else return 0;
    }

    function slideNext(){
    // ref property that point to cuurent transform
    var ref = currentTransform();
    //use Math.abs function to ignoring any negative digit property    
    if(Math.abs(ref) !== last)
        slide.style.transform =`translateX(${ref - 10}%)`;
    else
        slide.style.transform =`translateX(${0}%)`;
    }

    function slidePervious(){
    var ref = currentTransform();   
    if(ref !== 0)
        slide.style.transform =`translateX(${ref + 10}%)`;          
    }


// Event listeners
nextBtn.addEventListener('click',slideNext);
pervBtn.addEventListener('click',slidePervious);

//loading
const slidecontainer = document.querySelector('.slide-container');    
const loading = document.querySelector('.loading');    
function loadImage(){
  slidecontainer.classList.remove('unloaded');
    loading.classList.add('remove');
}
window.addEventListener('load',loadImage);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.