JSFiddle - React, Tailwind, and code Playground

by js55 js55

HTML

<div class="wrapper" style="text-align: center;">
            <img id="img" src="">
			<p>
				<button id="back">Назад</button>
				<button id="forward">Вперед</button>
			</p>
		</div>

JavaScript

$(document).ready(function() {//Инизилизируем jquery
var images = ["http://devoid.tmweb.ru/img/liteslider/1.jpg", "http://devoid.tmweb.ru/img/liteslider/2.jpg", "http://devoid.tmweb.ru/img/liteslider/3.jpg", "http://devoid.tmweb.ru/img/liteslider/4.jpg", "http://devoid.tmweb.ru/img/liteslider/5.jpg"];
var currentImage = 0;//Первое изображение главное(текущая)
$("#img").attr("src", images[currentImage]);//Изменяем значение атрибута src в изображении. Выводим картинку текущую
$("#back").click(function() {//Создаем функцию для кнопки при клике
	if (currentImage !=0) {//Проверяем является ли текущая картинка первой
			currentImage--;//Если нет уменьшаем изображение на одно
			//$("#img").attr("src", images[currentImage]);//Изменяем значение src на новое
				$("#img").fadeToggle("fast");//Анимация
					setTimeout(function() {
						$("#img").attr("src", images[currentImage]);
					},200);
				$("#img").fadeToggle("fast");
	}
});
$("#forward").click(function() {
	if (currentImage != images.length - 1) {//Вернем длинну массива и вычтем 1
				currentImage++;//Увеличиваем значение на одно
				//$("#img").attr("src", images[currentImage]);
				$("#img").fadeToggle("fast");//Анимация
					setTimeout(function() {
						$("#img").attr("src", images[currentImage]);
					},200);
				$("#img").fadeToggle("fast");
	}
});

});