Javascript image slider not working properly

Question

I'm trying to create an image slider with controls "Next" and "Previous". Next should slide the image left using a negative margin-left property so as to reveal the second image. All the list elements holding individual images are set to display: inline-block so each list element can stand next to each other instead of stacking.

However, I found out that when the first image slides left it still reveals a little out of it while showing the second image, on and on and on like that, everything slides but never fully. the distance they slide is equal to the width of the image.

Also, when I get to the last image and click on next it should go back to the first image, the problem is that it displays each image along the way to the first image.

 window.onload = function () { var nextBtn = document.getElementsByClassName("nextBtn")[0], prevBtn = document.getElementsByClassName("prevBtn")[0]; var i = 0; var imgList = document.querySelectorAll(".slide"); var slideLength = imgList.length; var lastchild = imgList[slideLength - 1]; nextBtn.addEventListener("click", Next, false); prevBtn.addEventListener("click", Previous, false); function Next() { console.log(slideLength) imgList[i].style.marginLeft = "-600px"; if (imgList[i].classList.contains("active")) { imgList[i].classList.remove("active"); } if (imgList[i] !== lastchild) { i++; } else if (imgList[i] === lastchild) { i = 0; for (var j = 0; j < slideLength; j++) { imgList[j].style.marginLeft = "0"; } } imgList[i].classList.add("active"); } function Previous(e) { console.log(i); if (i !== 0) { imgList[i - 1].style.marginLeft = "0"; i--; console.log(i); } else { console.log(i); } } } 

 ul{ width: 100%; height: 350px; border: solid 3px white; margin:100px auto; overflow: hidden; } li{ display:inline-block; position: relative; transition: all 1s cubic-bezier(1,-0.01, 0, 1.13); list-style: none; } li img{ width:600px; height:350px } .slide h2{ position: absolute; bottom:80px; text-align: center; margin: 0 auto; left: 250px; color: #fff; font-size: 4em; font-weight: 900; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <ul class="slide-wrapper"> <li class="slide active"> <img src="http://placehold.it/350x150" alt=""> <h2>1</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>2</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>3</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>4</h2> </li> <li class="slide"> <img src="http://placehold.it/350x150" alt=""> <h2>5</h2> </li> </ul> </div> <!--<div class="test"> </div>--> <button class="nextBtn">Next</button> <button class="prevBtn">Previous</button> 

How can I make this work well strictly with vanilla javascript? Here is the link to the jsfiddle . However, it doesn't seem to work at all there.

Answer 1

Reference : https://jsfiddle.net/a2bk4bwu/3/

Replace your CSS with lines with the for ul & li

ul{
    width: 100%;
    height: 350px;
    border: solid 3px white;
    margin:100px auto;
    overflow: hidden;
    padding-left: 0;
    font-size: 0px;
}
li{
    font-size : 20px;
    display:inline-block;
    position: relative;
    transition: all 1s cubic-bezier(1,-0.01, 0, 1.13);
    list-style: none;
}

Things to note :

1. 'Ul' was taking extra padding by default {webkit-padding-start: 40px}
2. "display : inline-block" items are dependent on "white-space" . So give "0px" to the parent element to remove that white space between slides.

These will fix your CSS issues.