I built this simple slider with JS, but I am not so experienced with programming and I wonder what can be improved in this code, how to dry it, or how to apply some OOP paradigms to it, what is not good in it, what is bad practice... If you are going to build this simple slider how would you approach it?
HTML
<div class="container">
<button id="prev">Prev</button>
<!-- -->
<button id="next">Next</button>
<div class="slider-wrapper">
<ul>
<li>
<img src="http://www.lorempixel.com/300/200" alt="">
</li>
<li>
<img src="http://www.lorempixel.com/300/200/animals" alt="">
</li>
<li>
<img src="http://www.lorempixel.com/300/200/city" alt="">
</li>
<li>
<img src="http://www.lorempixel.com/300/200/people" alt="">
</li>
<li>
<img src="http://www.lorempixel.com/300/200" alt="">
</li>
<li>
<img src="http://www.lorempixel.com/300/200/animals" alt="">
</li>
<li>
<img src="http://www.lorempixel.com/300/200/city" alt="">
</li>
<li>
<img src="http://www.lorempixel.com/300/200/people" alt="">
</li>
</ul>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
transition: all .5s;
}
body {
font: bold 100%/1.5 monospace;
}
.container {
width: 300px;
height: 200px;
margin: auto;
position: relative;
}
.slider-wrapper {
overflow: hidden;
}
.slider-wrapper ul {
width: calc(8 * 300px);
overflow: hidden;
}
.slider-wrapper li {
float: left;
}
img {
display: block;
}
button {
font: bold 80%/1.5 monospace;
cursor: pointer;
padding: 1em;
background-color: purple;
color: whitesmoke;
border-radius: 50%;
position: absolute;
top: 35%;
z-index: 5;
}
#prev {
left: -50px;
}
#next {
right: -50px;
}
JS
//window.addEventListener('load',function(){
var imgs = document.getElementsByTagName('img');
var numOfImgs = imgs.length; // 4
var widthOfImg = 300; //imgs[0].getBoundingClientRect().width; // 300
var prevBtn = document.getElementById('prev');
var nextBtn = document.getElementById('next');
var currentImg = 0;
var sliderWrapper = document.querySelector('.slider-wrapper>ul');
var translatedPixels = 0;
prevBtn.addEventListener('click', function () {
if (currentImg === 0) {
return;
}
currentImg--;
sliderWrapper.style.transform = 'translateX(' + (-translatedPixels + widthOfImg) + 'px)';
translatedPixels -= 300;
});
nextBtn.addEventListener('click', function () {
if (currentImg === numOfImgs - 1) {
return;
}
currentImg++;
sliderWrapper.style.transform = 'translateX(' + -widthOfImg * currentImg + 'px)';
translatedPixels += 300;
});
//});