How to create a carousel with random images from a specific folder?

I have a problem that seems small, but it is no longer making me sleep at night, I am probably thinking about it too much and I have lost sight of the correct path!

I'm using Bootstrap 4 as Framework. I have to insert an automatic, interaction-free, full-page Carousel that displays images in random order each time the page is refreshed. It has to get the images from a specific folder, because I have a large number of images. Do I have to use a JS? because in this case I'm not really knowledgeable.

below the piece of basic code from which I start. Obviously written like this works without problems, and reflects the style I need, but the images are always the same, and in the order indicated.

Thanks in advance

<section class="nopadding">
    <div id="carouselProjRec" class="carousel slide carousel-fade" data-ride="carousel" interval="1800">
  <div class="carousel-inner">
    <div class="carousel-item transparent" style="background-image: url(img/car4.jpg)">
    </div>
    <div class="carousel-item active transparent" style="background-image: url(img/car3.jpg)">
    </div>
    <div class="carousel-item transparent" style="background-image: url(img/car8.jpg)">
    </div>
    <div class="carousel-item transparent" style="background-image: url(img/car7.jpg)">
    </div>
    <div class="carousel-item transparent" style="background-image: url(img/car6.jpg)">
    </div>
    <div class="carousel-item transparent" style="background-image: url(img/car11.jpg)">
    </div>
    </div>
  </div>
    </div>
</section>

Here the CSS

    .carousel-inner > .carousel-item {
    min-height: 800px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Thanks to everyone who can help me!