There are 14 pictures in the image gallery; when you click on the arrows, the pictures change dramatically, and how to make a smooth transition.
var thumbnails = Array.prototype.slice.call(document.querySelectorAll('.gallery__img')); function clickOnThumbnail(event) { document.querySelector('.image-main').src = this.dataset.fullUrl; } for (var i = 0; i < thumbnails.length; i++) { thumbnails[i].addEventListener('click', clickOnThumbnail); }; (function arrows(){ var leftArrow = document.getElementById('arrowleft'), rightArrow = document.getElementById('arrowright'), initImgNumber = 1; maxImgNum = 14; leftArrow.addEventListener('click', moveBackvard); rightArrow.addEventListener('click', moveForvard); function moveBackvard(){ var image = document.getElementById('image-main'); initImgNumber--; if (initImgNumber == 0){initImgNumber = maxImgNum}; image.setAttribute('src', 'images/gallery/big/' + initImgNumber + '.jpg'); }; function moveForvard(){ var image = document.getElementById('image-main'); initImgNumber++; if (initImgNumber > maxImgNum){initImgNumber = 1}; image.setAttribute('src', 'images/gallery/big/' + initImgNumber + '.jpg'); }; })(); <div class="content"> <div class="gallery__wrapper"> <div class="image-main__wrapper"> <img class="image-main" src="images/fullsize/1.jpg" id="image-main"> <div class="arrowleft"><img src="images/left.jpg" id="arrowleft"/></div> <div class="arrowright"><img src="images/right.jpg" id="arrowright"/></div> <div class="image-thumbnails__wrapper"> <ul class="thumbnails"> <li><img id="thumb-1" class="gallery__img" src="images/thumbs/1.jpg" data-full-url="images/fullsize/1.jpg"/></li> <li><img id="thumb-2" class="gallery__img" src="images/thumbs/2.jpg" data-full-url="images/fullsize/2.jpg"/></li> <li><img id="thumb-3" class="gallery__img" src="images/thumbs/3.jpg" data-full-url="images/fullsize/3.jpg"/></li> <li><img id="thumb-4" class="gallery__img" src="images/thumbs/4.jpg" data-full-url="images/fullsize/4.jpg"/></li> <li><img id="thumb-5" class="gallery__img" src="images/thumbs/5.jpg" data-full-url="images/fullsize/5.jpg"/></li> <li><img id="thumb-6" class="gallery__img" src="images/thumbs/6.jpg" data-full-url="images/fullsize/6.jpg"/></li> <li><img id="thumb-7" class="gallery__img" src="images/thumbs/7.jpg" data-full-url="images/fullsize/7.jpg"/></li> <li><img id="thumb-8" class="gallery__img" src="images/thumbs/8.jpg" data-full-url="images/fullsize/8.jpg"/></li> <li><img id="thumb-9" class="gallery__img" src="images/thumbs/9.jpg" data-full-url="images/fullsize/9.jpg"/></li> <li><img id="thumb-10" class="gallery__img" src="images/thumbs/10.jpg" data-full-url="images/fullsize/10.jpg" /></li> <li><img id="thumb-11" class="gallery__img" src="images/thumbs/11.jpg" data-full-url="images/fullsize/11.jpg"/></li> <li><img id="thumb-12" class="gallery__img" src="images/thumbs/12.jpg" data-full-url="images/fullsize/12.jpg"/></li> <li><img id="thumb-13" class="gallery__img" src="images/thumbs/13.jpg" data-full-url="images/fullsize/13.jpg"/></li> <li><img id="thumb-14" class="gallery__img" src="images/thumbs/14.jpg" data-full-url="images/fullsize/14.jpg"/></li> </ul> </div> </div> </div> .arrowleft { position:relative; top:205px; width:40%; float:left; } .arrowright { position:relative; left:711px; top:205px; width:40%; float:right; } .arrowleft img{ width:100%; } .arrowright img{ width:100%; } .arrowleft img:hover{ cursor:pointer; width:95%; } .arrowleft img:active{ width:85%; } .arrowright img:hover{ cursor:pointer; width:95%; } .arrowright img:active{ width:85%; } .gallery__wrapper{ position: absolute; left:200px; } .image-main__wrapper{ } .image-main{ position: absolute; line-height: 0; } .image-thumbnails__wrapper{ width:785px; height: 150px; position: absolute; top:450px; } .thumbnails{ position: absolute; float: left; list-style: none; display: flex; flex-wrap: wrap; margin:0; cursor: pointer; } .thumbnails img{ border: 2px solid dimgray; margin: 0px 1px 17px!important; } 