как сделать такую анимацию чтобы при нажатии на стрелки картинки плавно двигались, сейчас просто работает без анимации просто меняются картинки в галереи
<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>
[JS]
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');
};
})();
[/JS]
