Bootstrap carousel doesn't switch to the next image when clicking on the next/preview btn

Question

I have copy/past the bootstrap carousel directly from the bootstrap website, this display well on the screen, but the next and preview btn doesn't work. The first image is ok, but when I click either next or previous btn nothing happens, also the three dot (because I have three images) are not showing on the bottom of the carousel.

I have the bootstrap 5.1.3 version on my project, my second and third images path are ok because when I replace the first image for the second or third it works.

I am wandering if maybe theire is something else than bootstrap to install on my project that I am missing but what ?

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src=<%="#{@bien.image1}"%> alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src=<%="#{@bien.image2}"%> alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src=<%="#{@bien.image3}"%> alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

I code in Ruby on the Rails framework, I have try bundle and Yarn install, kill my local host server and restarted it multiple times.

Bootstrap carousel required bootstrap Javascript library and other dependency library did you import them? — Rahadur, Apr 02 '22 at 07:25
I don't think so, as I am new to web developpement I was thinking all the dependencies required would be listed on the bootstrap website. Do you know where I can find a list of all dependicies ? — , Apr 02 '22 at 07:38
Which version of rails are you using? rails has different way to add javascript dependency. — Rahadur, Apr 02 '22 at 07:40

score 1 · Answer 1 · answered Apr 02 '22 at 11:22

1

If you are using Bootstrap 5 as the tags suggest then the problem is in the first line of your above code....

data-ride="carousel"

That is Bootstrap 3 formatting, from v4 onward it became...

data-bs-ride="carousel"

answered Apr 02 '22 at 11:22

Cutey from Cute Code

1,065
3
13

Rahadur · Answer 2 · 2022-04-02T12:53:56.083

Step: 1: Install Bootstrap packages

npm install bootstrap @popperjs/core

Step 2: Create stylesheets folder:

Create a new folder at app/javascript/stylesheets

Step 3: Create stylesheets file:

Create a new file at app/javascript/stylesheets/application.scss

Inside the file add line

@import "~bootstrap/scss/bootstrap";

Step 4: Update `environment.js` file:

In file config/webpack/environment.js add following code

const { environment } = require('@rails/webpacker')

// Add the following lines
const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']  // Not a typo, we're still using popper.js here
}))
// End new addition

module.exports = environment

Step 5: Update `application.js` file:

In file app/javascript/packs/application.js, at bottomm of the file, add:

import "bootstrap"

// The stylesheet location we created earlier
require("../stylesheets/application.scss")

Step 6: Update `application.html.erb` file:

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

Add new line at the bottom in the head tage so it look like

Final `application.html.erb` file:

<head>
  <title>BootstrapDemo</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>

Notice the new tag we added is stylesheet_pack_tag instead of the existing stylesheet_link_tag already there. This new tag will import the styles sheets from app/javascript/packs/*.js in this case, it will import styles from app/javascript/packs/application.js

Thank you very much for your answer ! Unfortunately that doesn't solve the problem eather. I have read on the Bootstrap website that Bootstrap 5 is designed to work without JQuery. I am still wandering what could be the problem ... — , Apr 02 '22 at 10:42

Bootstrap carousel doesn't switch to the next image when clicking on the next/preview btn

2 Answers2

Step: 1: Install Bootstrap packages

Step 2: Create stylesheets folder:

Step 3: Create stylesheets file:

Step 4: Update environment.js file:

Step 5: Update application.js file:

Step 6: Update application.html.erb file:

Final application.html.erb file:

Step 4: Update `environment.js` file:

Step 5: Update `application.js` file:

Step 6: Update `application.html.erb` file:

Final `application.html.erb` file: