Which Javascript I need for a carousel with random photos from specific folder?

Question

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>

score 0 · Answer 1 · answered Nov 18 '20 at 19:47

0

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.

answered Nov 18 '20 at 19:47

Praveen Kumar Purushothaman

164,888
24
203
252

oh, ok....I thought it was easier and you could create a JS dedicated to reading the specific folder! Unfortunately I don't know PHP and JS is also very limited. thank you so much for your feedback anyway. Maybe someone can find another solution ... – Dam V Nov 18 '20 at 20:44
@DamV I don't think there's anything else. But feel free to accept it after couple of days! Have a nice day. – Praveen Kumar Purushothaman Nov 18 '20 at 21:48
banging my head against the wall I solved it, lol. This JS I solved the problem and it seems to work !! – Dam V Nov 19 '20 at 00:34
@DamV But you're not getting it from JavaScript. You're hard-coding it. If you wanna do that, that's easier. Above JavaScript is what you need from `// listing all files using forEach`. You said with the JavaScript alone you wanna access the filesystem not an array! – Praveen Kumar Purushothaman Nov 19 '20 at 09:45

score 0 · Answer 2 · answered Nov 19 '20 at 00:36

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 -->

_It has to get the images from a specific folder, because I have a large number of images._ Your code doesn't do it. It just loops from an array, which is totally different from what you asked. — Praveen Kumar Purushothaman, Nov 19 '20 at 09:46

Which Javascript I need for a carousel with random photos from specific folder?

2 Answers2