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

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"  data-ride="carousel">
    <ol >
      <li data-target="#carouselExampleIndicators" data-slide-to="0" ></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div >
      <div >
        <img  src=<%="#{@bien.image1}"%> alt="First slide">
      </div>
      <div >
        <img  src=<%="#{@bien.image2}"%> alt="Second slide">
      </div>
      <div >
        <img  src=<%="#{@bien.image3}"%> alt="Third slide">
      </div>
    </div>
    <a  href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </a>
    <a  href="#carouselExampleIndicators" role="button" data-slide="next">
      <span  aria-hidden="true"></span>
      <span >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.

CodePudding user response：

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"

CodePudding user response：

Step: 1: Install Bootstrap packages

npm install bootstrap jquery @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

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: