<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')
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.