Images changing when I refresh page

I'm making a website for a friend that produces digital art. This person wants to have images scrolling across the screen like a marquee but with images, however, I'm running into an annoying error. Everytime I refresh the page, the images change. Sometimes its how It's how I want it to be but sometimes it's wrong.

These are the images that im talking about:

The incorrect one

The correct one

You can see for yourself on my website: https://www.kevs.website/art/

This is the HTML code:

<div class="preve">
    <img src="images/image0.jpg" class="preveimg">
    <img src="images/image1.jpg" class="preveimg">
    <img src="images/image2.jpg" class="preveimg">
    <img src="images/image3.jpg" class="preveimg">
    <img src="images/image0.jpg" class="preveimg">
    <img src="images/image1.jpg" class="preveimg">
    <img src="images/image2.jpg" class="preveimg">
    <img src="images/image3.jpg" class="preveimg">
</div>

This is the CSS code:

.preveimg {
height: 493.150685px;
width: 500px;
animation: sc-left 20s linear infinite;
background-repeat: no-repeat;
background-size: cover;

}

.preve {
display: flex;

}

Code may be amateur because I only started a while ago.

This only occurs when I host it on a website. When I open it from the file explorer everything works fine which confuses me because should'nt they be the same?