Autoslider (Vanilla JS) not working on IOS

Question

So I created a slider that changes its slide every 5th second. It is working on Google Chrome as well as Firefox but it doesn't work on Safari (Desktop). On IOS Mobile it doesn't work on either Browser which is really weird since I checked the Settings on every Browser. I'm running the newest version and I have no idea why it wouldn't work.

I created a fiddle so you can test it out aswell:

https://jsfiddle.net/yanisdeplazes/4nLbfv58/3/

HTML:

<section id="slider-section">
    <div class="slider-container">
        <div class="slider-wrapper">
            <div class="slider">
                <img class="slider__image" style="background-color:blue;">
                <div class="slider__text">
                    <h1>Title 1</h1>
                </div>
            </div>
            <div class="slider">
                <img class="slider__image" style="background-color:red;">
                <div class="slider__text">
                    <h1>Titel 2</h1>
                </div>
            </div>
        </div>
    </div>
</section>

JS:

var selection = document.querySelector('.slider-wrapper') == null;
if (selection) {

} else {

    var i = 0;
    const track = document.querySelector('.slider-wrapper');

    function autoslider() {
        var i = 0;
        var time = 5000; // set auto slide time
        const slides = Array.from(track.children); // get Slide as Array
        let arrayLength = slides.length;
        while (i <= arrayLength) {
            (function(i) {
                if (i != slides.length) {
                    setTimeout(function() {
                        const slideWidth = slides[0].getBoundingClientRect().width; // get Slide Width
                        track.style.transform = 'translateX(-' + i * 100 * slideWidth / window.innerWidth + 'vw)';
                    }, time * i)
                } else {
                    setTimeout(function() {
                        autoslider();
                    }, time * i)
                }
            })(i++)
        }
    }

    autoslider();

}

CSS:

:root {
    --sizeslider: 1200px;
}
@media screen and (max-width: 1300px) {
    :root {
        --sizeslider: 1000px;
    }
}
.slider-container {
    max-width: 100vw;
    overflow: hidden;
    margin: auto;
}
@media (min-width: 1300px) {
    .slider-container {
        width: var(--sizeslider);
    }
}
.slider-wrapper {
    display: flex;
    transition: all 0.4s ease-in;
}
.slider {
    min-width: 100%;
    display: block;
    padding: 0 25px;
}
@media (max-width: 1300px) {
    .slider {
        padding: 0;
    }
}
.slider__image {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.slider__text {
    margin-top: 40px;
    width: 100%;
}
@media (min-width: 1920px) {
    .slider__image {
        width: calc(var(--sizeslider) / 1.8) !important;
    }
}
@media (min-width: 1100px) {
    .slider {
        padding: unset;
        justify-content: center;
        display: flex;
        flex-direction: row;
    }
    .slider:nth-child(2n) {
        flex-direction: row-reverse;
    }
    .slider__image {
        width: calc(var(--sizeslider) / 2 - 50px);
        padding: 0px 50px 0px 0px;
        height: 100%;
    }
    .slider__text {
        width: calc(var(--sizeslider) / 2);
        padding: 0px 50px;
    }
    .slider:nth-child(2n) .slider__text {
        text-align: right;
    }
    .slider:nth-child(2n) .slider__image {
        padding: 0px 0px 0px 50px;
    }
}

Thank you for your Answers!

Answer 1

Safari doesn't like having variables outside of a function that it uses in a function.

So the simple solution to make it work would be putting the variable inside the function.

var i = 0;

function autoslider() {
    const track = document.querySelector('.slider-wrapper');
    var i = 0;
    var time = 5000; // set auto slide time
    const slides = Array.from(track.children); // get Slide as Array
    let arrayLength = slides.length;
    while (i <= arrayLength) {
        (function(i) {
            if (i != slides.length) {
                setTimeout(function() {
                    const slideWidth = slides[0].getBoundingClientRect().width; // get Slide Width
                    track.style.transform = 'translateX(-' + i * 100 * slideWidth / window.innerWidth + 'vw)';
                }, time * i)
            } else {
                setTimeout(function() {
                    autoslider();
                }, time * i)
            }
        })(i++)
    }
}

autoslider();