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

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.

2 answers

  • answered 2022-04-02 08:22 Rahadur

    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

  • answered 2022-04-02 11:22 Cutey from Cute Code

    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"
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum