How to make it so that when you click on the slide forward, the animation starts from the first slide and from the current one (also with the back button). When we reach the last slide and click forward, the first slider should go.

var slideIndex = 0; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("picture"); var mySlides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1; } console.log(slides.length); if (n < 1) { slideIndex = slides.length; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("active", ""); } if (n == 1) { var t = 0; } if (n == 2) { var t = 1 } if (n == 3) { var t = 2 } function animate(options) { var start = performance.now(); requestAnimationFrame(function animate(time) { // timeFraction от 0 до 1 var timeFraction = (time - start) / options.duration; if (timeFraction > 1) timeFraction = 1; // текущее состояние анимации var progress = options.timing(timeFraction) options.draw(progress); if (timeFraction < 1) { requestAnimationFrame(animate); } }); } animate({ duration: 2000, timing: function(timeFraction) { return timeFraction; }, draw: function(progress) { mySlides[0].style.marginLeft = progress * (-1000) * t + 'px'; } }); console.log(slideIndex); dots[slideIndex - 1].className += " active"; } 
 .slidershow-container { max-width: 1000px; position: relative; margin: auto; overflow: hidden; height: 350px; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .next { right: 8px; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .mySlides { text-align: center; max-height: 700px; width: 3000px; margin-left: 0px; height: 505px; } .picture { display: block; width: 1000px; float: left; } img { width: 1000px; height: 350px; } .numbertext { display: inline; } .dot { cursor: pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: 0.6s ease; } .active, .dot:hover { background-color: #717171; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="slidershow-container"> <div class="mySlides"> <div class="picture"><img style="background-color: black;" src=""></div> <div class="picture"><img style="background-color: #ff4b5a;" src=""></div> <div class="picture"><img style="background-color: #36ff31;" src=""></div> </div> <a onclick="plusSlides(-1)" class="prev">&#10094</a> <a onclick="plusSlides(1)" class="next">&#10095</a> </div> <br> <div style="text-align:center;"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <div class="div"></div> <script type="text/javascript" src="js/script.js"></script> </body> </html>

0