<div id="main" class="main-container">
    <div class="slide-item active"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=502"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=2"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=3"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=4"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=5"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=6"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=7"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=8"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=9"></div>
    <div class="slide-item"><img class="slide-item-image" src="https://picsum.photos/1020/360?v=10"></div>
  <div class="bullets">
  </div>
  <div class="control prev">
        <i class="control-icon fas fa-3x fa-angle-left"></i>
    </div>
    <div class="control next">
        <i class="control-icon fas fa-3x fa-angle-right"></i>
    </div>
</div>
.main-container {
  max-width: 60%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  white-space: nowrap;
  
  &:before {
    content: '';
    display: block;
    padding-top: 35%;
  }
}

.slide-item {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;  
  transition: .5s all ease-in-out;
  // transform: translateX(-100%);
  
  &-image {
    width: 100%;
  }
}

.prev, .next {
  width: 90px;
  height: 100%;
  transition: 0.3s;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 10;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.3);
}

.control-icon {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slide-item.active {
  transform: translateX(0%);
}

.slide-item.active ~ .slide-item {
  transform: translateX(100%);
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 1; transform: translateX(-100%);}
} 
@keyframes slideL {
  0% {transform: translateX(100%);}
  100% {opacity: 1;}
}
View Compiled
// Get all elements that contain .slide-item
var elements = document.querySelectorAll('.slide-item');
// Declare variables
var active, activeElement;

// Create loop function and get the position of the active element. It always starts form 0 (the first slide)
var getActiveIndex = function() {
    var active = 0
    for (var i = 0; i < elements.length; i++) {
        var item = elements[i];
        if (item.classList.contains('active')) {
            active = i;
        }
    }
    // Return the active element (the current index) to be used later.
    return active;
}

// Create function for removing the active element. Add this into function because it is used multiple times
function removeActive() {
    // Get the current index of the active element from above.
    active = getActiveIndex();
    // Get the active class
    activeElement = document.querySelector('.active');
    // Remove it from the current active element
    activeElement.classList.remove('active');
}

// Select the "next" control
var nextItem = document.querySelector('.next');
// Add an event listener (in this case is click) on the next control
nextItem.addEventListener('click', function() {
    // Call the "removeActive" functon from earlier 
    removeActive();
    // Declare the active class to the next element
    if (active < elements.length - 1) {
        elements[active + 1].classList.add('active');
        // If the active element is currently on the last slide, declate the active class to the first item.
    } else if (active == elements.length - 1) {
        elements[0].classList.add('active');
    }
});

// Select the "prev" control
var prevItem = document.querySelector('.prev');
// Add an event listener (in this case is click) on the prev control
prevItem.addEventListener('click', function() {
    // Call the "removeActive" functon from earlier
    removeActive();
    // If curent active element is any but the first, declate the active class to the previous
    if (active > 0) {
        elements[active - 1].classList.add('active');
        // Else, add the class to the last slide.
    } else {
        elements[elements.length - 1].classList.add('active')
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.