JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="slideshow">
    <li>
        <h2>Image 1</h2>
    </li>
    <li>
        <h2>Image 2</h2>
    </li>
    <li>
        <h2>Image 3</h2>
    </li>
    <li>
        <h2>Image 4</h2>
    </li>
    <li>
        <h2>Image 5</h2>
    </li>
    <li>
        <h2>Image 6</h2>
    </li>
</ul>

JavaScript

$(function () {
    var duration = 2000;
    var speed = 700;
    var playList = [];
    var length = $('.slideshow li').length - 1;
    var i = 0;
    
    for(n = 0; n <= length; n++) {
        playList.push(n);
    }
    playList = shuffle(playList);

    slidePicture = function () {
        $('.slideshow li').eq(playList[i]).fadeOut(speed, function () {
            var next = (i >= length) ? 0 : i + 1;
            $('.slideshow li').eq(playList[next]).fadeIn(speed);
            i = next;
        });
    };
    
    $('.slideshow li').hide();
    $('.slideshow li').eq(playList[i]).show();
    setInterval(slidePicture, duration);
});

function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}