Ad

Bootstrap 4 Carousel Not Working When Running From Node.js Server

- 1 answer

I have one of those generic bootstrap carousels from the tutorials. When I run the website using the "Live Server" extension, everything works. The carousel starts to automatically move once loaded.

However, when I'm running and serving the website through a simple node.js server, the carousel won't automatically slide, but it still responds to clicking through the pictures.

I have tried to run all my scripts, after the document is ready, however that did not make a difference. I've also tried looking at the dev tools in Chrome, and there is no errors related to any of the files in my website.

Carousel:

<div id="carouse-container">
  <div
    id="myCarousel"
    class="carousel slide"
    data-ride="carousel"
    data-
    interval="4000"
    data-pause="false"
  >
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="images/åbenthus.png" />
      </div>
      <div class="carousel-item">
        <img src="images/dsa.png" />
      </div>
      <div class="carousel-item">
        <img src="images/proteinpowder.png" />
      </div>
    </div>
  </div>
</div>

Node.js-server:

var express = require("express");
var app = express();
var path = require("path");

app.use(express.static(path.join(__dirname, "public")));

app.listen(8080, () => {
  console.log("listening on port 8080");
});

I expect the carousel to automatically start when the website is loaded.

Ad

Answer

My Node.js were running on a raspberrypi, and for some reason the carousel would not start. I suspect this is because of how the elements are loaded and how javascript is being executed with bootstrap, while my raspberry pi not being the fastest machine.

I decided to make a new js file, and manually start the carousel using javascript, instead of a bootstrap class (how to do this, can be found in bootstrap documentation), and then i set a timeout for 2 seconds. So 2 seconds after the js file is loaded, it will find my carousel div, and start the carousel. This delay is what made sure the carousel was loaded in, before any javascript would try to start it.

Ad
source: stackoverflow.com
Ad