Which Javascript I need for a carousel with random photos from 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.

Anyone can help me with the Javascript that i need for do that??

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

<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text&family=Big+Shoulders+Text&family=Goldman&family=Heebo&family=Quicksand&family=Shadows+Into+Light&display=swap" rel="stylesheet">
    <style media="screen">
        .carousel-inner > .carousel-item {
            min-height: 800px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
    <title></title>
</head>
<body>
    <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>
    </section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

回答1:

Unfortunately, reading data from a directory isn't supported in JavaScript. You might need a server side language like PHP or Node JS to read the directory and add them in HTML.

For example, if it's PHP, you can do something like List all files in one directory PHP. You can use that array to build your array:

<?php
  foreach($files as $file) {
    echo '<div class="carousel-item transparent" style="background-image: url(img/' . $file . ')"></div>';
  }

Or if you're using Node JS, it's still simpler:

const directoryPath = path.join(__dirname, 'Documents');
//passsing directoryPath and callback function
fs.readdir(directoryPath, function (err, files) {
    //handling error
    if (err) {
        return console.log('Unable to scan directory: ' + err);
    } 
    //listing all files using forEach
    files.forEach(function (file) {
        // Do whatever you want to do with the file
        console.log('<div class="carousel-item transparent" style="background-image: url(img/' + file + ')"></div>'); 
    });
});

Ultimately you need a server side language for this.

回答2:

This JS is working..

<div class="container-fluid nopadding" style="width:100vw; min-height: 400px;">

<script language="javascript">
  var delay=1500 //set delay in miliseconds
  var curindex=0

  var randomimages=new Array()

    randomimages[0]="img/car1.jpg"
    randomimages[1]="img/car5.jpg"
    randomimages[2]="img/car2.jpg"
    randomimages[3]="img/car4.jpg"
    randomimages[4]="img/car3.jpg"
    randomimages[5]="img/car6.jpg"

  var preload=new Array()

  for (n=0;n<randomimages.length;n++)
  {
    preload[n]=new Image()
    preload[n].src=randomimages[n]
  }

  document.write('<img width="100%" height="100%" class="img-size" <img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

  function rotateimage()
  {

  if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
  curindex=curindex==0? 1 : curindex-1
  }
  else
  curindex=tempindex

    document.images.defaultimage.src=randomimages[curindex]
  }

  setInterval("rotateimage()",delay)

</script>

 <!--  Random image slideshow - Thanks to Tyler Clarke (tyler@ihatecoffee.com)
  For this script and more, visit http://www.javascriptkit.com -->

来源：https://stackoverflow.com/questions/64900211/which-javascript-i-need-for-a-carousel-with-random-photos-from-specific-folder

标签

javascript

css

random

carousel

slideshow