JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div name = "slider">
    <img name ="slide0" src="https://dummyimage.com/100x100/db7782/000000.png">
    <img name ="slide1" src="https://dummyimage.com/100x100/7796d9/000000.png">
    <img name ="slide2" src="https://dummyimage.com/100x100/77d9af/000000.png">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div name = "slider">
    <img name ="slide0" src="https://dummyimage.com/100x100/db7782/000000.png">
    <img name ="slide1" src="https://dummyimage.com/100x100/7796d9/000000.png">
    <img name ="slide2" src="https://dummyimage.com/100x100/77d9af/000000.png">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div name = "slider">
    <img name ="slide0" src="https://dummyimage.com/100x100/db7782/000000.png">
    <img name ="slide1" src="https://dummyimage.com/100x100/7796d9/000000.png">
    <img name ="slide2" src="https://dummyimage.com/100x100/77d9af/000000.png">
</div>

JavaScript

var howMuchCadrsInSecond = 60; // Частота кадров в секунду
var animationDurationMSeconds = 3000; // Время за которое происходит смена слайдов
var howMuchTimesWorkAnimation = 3000; // Время через которое происходит смена слайдов
var timeDivider = howMuchCadrsInSecond * animationDurationMSeconds / 1000; // Переменная содержащая делитель времени он нужен для расчёта кординат в слайдере
var sliders = document.getElementsByName("slider"); // Ищет все элементы слайдеров
var timeWorked = []; // Массив с интервалами для каждого слайдера
var countSlides = 0; //Переменная для отслеживания слайдеров закончевших шаг
var blockEvents = true; // Переменная переключать показывает, что в момент смены слайда совершать события нельзя.
var slides = [];
 
for (var i = 0; i < sliders.length; i++)
{
    slides[i] = sliders[i].children;
    setSlidesParametrs(slides[i]);
    animatedSlides(slides[i]);
}
 
function startAnimation ()
{
    countSlides++;
    if (countSlides == (slides.length * 3))
    {
        function starter ()
        {
            for (var i = 0; i < slides.length; i++)
            {
                animatedSlides(slides[i]);
            }
        }
        setTimeout(starter, howMuchTimesWorkAnimation);
        countSlides = 0;
        blockEvents = false;
    }
}
 
function move (slide, sCordLeft, sCordTop, sCordWidth, sCordHeight, cordLeft, cordTop, cordWidth, cordHeight, distanceLeft, distanceTop, distanceWidth, distanceHeight, countSteps, intervalWork, callBack) // пошаговая функция пермещения
{
    if (sCordLeft < cordLeft) // left 
    {
        slide.style.marginLeft = Number(slide.style.marginLeft.replace("px", "")) + distanceLeft / (timeDivider / countSteps);
        if (Number(slide.style.marginLeft.replace("px", "")) > cordLeft)
        {
            slide.style.marginLeft = cordLeft;
        }
    }
    else if (sCordLeft > cordLeft)
    {
        slide.style.marginLeft = Number(slide.style.marginLeft.replace("px", "")) - distanceLeft / (timeDivider /...