LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.act{
background-color: rgba(255, 0, 0, 1);
color: rgba(255, 255, 255, 1);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
var count_elements = 4,
current_element = 0,
width = 400,
height = 200,
duration = 500,
pause = 1800,
auto = false;
var screen = $('#items');
screen.width(width * count_elements);
function move_screen(x) {
current_element = (current_element + x + count_elements) % count_elements;
var time = auto ? pause : 0;
screen.delay(time).animate({
marginLeft: -width * current_element
}, duration, function() {
if(auto) move_screen(x);
});
}
$("#prev").click(function() {
auto = false;
move_screen(-1);
$("#auto").toggleClass("act", auto);
})
$("#next").click(function() {
auto = false;
move_screen(1);
$("#auto").toggleClass("act", auto);
})
$("#auto").click(function() {
auto = !auto;
auto ? move_screen(1) : screen.stop();
$("#auto").toggleClass("act", auto);
})
});
</script>
</head>
<body>
<style>
#slider {
position: relative;
overflow: hidden;
width: 400px;
height: 200px;
margin-bottom: 10px;
}
#items img {
float: left;
width: 400px;
height: 200px;
}
</style>
<div id="slider">
<div id="items">
<img src="https://cdn.jdpower.com/Models/400x200/2018-McLaren-570S.jpg" />
<img src="https://cdn.iseecars.com/image2/w450/16564.jpg" />
<img src="https://www.theautochannel.com/db/as_images/17876.jpg" />
<img src="https://www.rrtuningclub.ru/media/k2/items/cache/d6c28c6582af8287b0eef478e4a8f548_M.jpg" />
</div>
</div>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
<button id="auto">Авто</button>
</body>
</html>