<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
body {
height: 300vh;
}
.wrap {
width: 100%;
}
nav {
height: 110px;
width: 100%;
position: fixed;
transition: .3s;
}
ul {
list-style: none;
display: flex;
justify-content: flex-end;
margin: 30px 60px 30px 30px;
}
li {
float: left;
}
nav a {
float: left;
color: black;
text-decoration: none;
text-transform: uppercase;
padding: 15px;
font-size: 18px;
}
nav i {
color: rgba(57, 196, 241)
}
.logo {
top: 30px;
position: absolute;
left: 50px;
width: 15%;
position: fixed;
}
.container {
width: 100vh;
overflow: hidden;
position: relative;
}
.prevBtn {
position: absolute;
top: 50%;
left: 0;
font-size: 20px;
padding: 20px;
}
.nextBtn {
position: absolute;
top: 50%;
right: 0;
font-size: 20px;
padding: 20px;
}
.slider {
display: flex;
width: 100%;
height: 500px;
}
.slider img {
width: 100vh
}
</style>
<body>
<div class="wrap">
<img src="logo.png" class="logo">
<nav>
<ul>
<li> <a href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">Services</a></li>
<li> <a href="#">Blog</a></li>
<li> <a href="#">Gallery</a></li>
<li> <a href="#">Contacts</a></li>
<a href=""> <i class="fas fa-search"></i></a>
</ul>
</nav>
<div class="container">
<div class="slider">
<img src="chair5.jpg" id="lastClone">
<img src="chair.jpg">
<img src="chair2.jpg">
<img src="chair3.jpg">
<img src="chair4.jpg">
<img src="chair5.jpg">
<img src="chair.jpg" id="firstClone">
</div>
<button class="prevBtn"> <i class="fas fa-arrow-left"></i>
</button>
<button class="nextBtn"> <i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<script>
const Slider = document.querySelector('.slider');
const Images = document.querySelectorAll('.slider img');
//Buttons
const prevBtn = document.querySelector('.prevBtn');
const nextBtn = document.querySelector('.nextBtn');
//counter
let counter = 1;
const size = Images[0].clientWidth;
Slider.style.transform = 'translateX(' + (-size * counter) + 'px)';
// BUTON LISTENER
nextBtn.addEventListener('click', () => {
if (counter >= Images.length - 1)
return;
Slider.style.transition =
"transform 0.4s ease-in-out";
counter++;
Slider.style.transform = 'translateX(' + (-size *
counter) + 'px)';
});
prevBtn.addEventListener('click', () => {
if (counter <= 0) return;
Slider.style.transition = "transform 0.4s ease-in-out";
counter--;
Slider.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
Slider.addEventListener('transitionend', () => {
console.log(Images[counter]);
if (Images[counter].id === 'lastClone') {
Slider.style.transition = "none";
counter = Images.length - 2;
Slider.style.transform =
'translateX(' + (-size * counter) + 'px)';
}
if (Images[counter].id === 'firstClone') {
Slider.style.transition = "none";
counter = Images.length - counter;
Slider.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
})
</script>