Utilizing Bootstrap 4's Grid System alongside Modals and Carousels

I'm currently using Bootstrap 4.1.0 and have successfully created a grid layout on my webpage. However, I am facing difficulties in implementing a carousel for each grid image. The issue is that only the first grid element (B-1) displays the carousel when clicked. Upon clicking an image within the grid, a modal should pop up with a carousel inside it.

Below is the code snippet I'm using. Can anyone help me identify what I might have missed or done incorrectly?

<div class="container">
<div class="row mb-2 text-center">

<div class="col-sm-6 col-lg-3 mb-2">
<div class="col-md-12 text-center">
 <img class="img-fluid" data-toggle="modal" data-target="#B-1" alt="B-1" src="http://nationalkitchencabinets.com/images/B-1.jpg">
<button type="button" class="btn btn-info">Door Style B-1</button>
...
(several more similar sections for different door styles)
...

To view the complete implementation in action, you can check out this CodePen link: https://codepen.io/mlegg10/pen/ZoQRME/

javascriptcsstwitter-bootstrapbootstrap-4carousel

Answer №1

The carousel controls within each modal are currently directing to the 1st carousel, causing the arrows to be ineffective in advancing the slides. To resolve this issue, update the href values in the carousel-controls...

href="#carouselExample2", href="#carouselExample3", and so on...

Check out the demo here: 

<a class="carousel-control-prev" href="#carouselExample2" role="button" data-slide="prev">
    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample2" role="button" data-slide="next">
   <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>
 </a>

Answer №2

According to @ZimSystem.

The Button's `href` and the Modal's `id` have the exact same name.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row mb-2 text-center">

    <div class="col-sm-6 col-lg-3 mb-2">
      <div class="col-md-12 text-center">
        <img class="img-fluid" data-toggle="modal" data-target="#B-1" alt="B-1" src="http://nationalkitchencabinets.com/images/B-1.jpg">
        <button type="button" class="btn btn-info">Door Style B-1</button>
        <!-- The modal -->
        <div class="modal fade" id="B-1" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">

                  <div class="carousel-inner row w-100 mx-auto" role="listbox">

                    <div class="carousel-item active">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-1.jpg" alt="slide 1">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-2.jpg" alt="slide 2">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-3.jpg" alt="slide 3">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1-4.jpg" alt="slide 4">

                    </div>

                    <div class="carousel-item">

                      <img class="img-fluid mx-auto d-block" src="http://nationalkitchencabinets.com/images/B-1L.jpg" alt="slide 5">

                    </div>
                  </div>

                  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-left fa-2x"></i>

                    <span class="sr-only">Previous</span>
                  </a>

                  <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">

                    <i style="color:#000; text-decoration: none;" class="fa fa-chevron-circle-right fa-2x"></i>

                    <span class="sr-only">Next</span>
                  </a>

                </div>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
...
...Remaining content has been omitted for brevity.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the Reason Behind My Array Populating on Rebuild but Not on Page Refresh?

I am currently utilizing a tech stack that includes Vue 3 with Composition API, a Pinia store, TypeScript, a SQL backend, and Fetch to retrieve data through my .NET 6 API. Within my codebase, I have a User.ts class: export default class User { userNam ...

javascripttypescriptvue.jsfetch

Activate Popover with Hover and simply click anywhere to dismiss

Currently utilizing Bootstrap 4 and intrigued by the popover feature that activates on hover and closes when clicked anywhere. I'm also interested in making links functional within the popover. Any suggestions or tips on how to achieve this? $(doc ...

javascriptjqueryhtmlbootstrap-4popover

I'm trying to find a way to access a particular field within an HTML document using JavaScript in Node.js. Can anyone

<Response> <SMSMessageData> <Message>Delivered to 1/1 Total Cost: NGN 2.2000</Message> <Recipients> <Recipient> <number>+9109199282928</number> <cost>NGN 2.2000&l ...

javascripthtmlnode.jsweb-scraping

Retrieve the centered element's object within a slideshow

I need to showcase a specific object's field on a dynamically transmitted slider, with the object always positioned in the center of the slider. Currently, I am utilizing vue-awesome-slider and have the following code: <v-layout> <v-f ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Using javascript to overlay and position many images over another image

I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...

javascriptjqueryhtmlcanvas

Completely digital Mongoose schema that resides solely in memory and is not saved permanently

Having trouble locating any documentation or references on this topic, which could suggest that I am approaching it incorrectly. Is there a way to utilize a Mongoose schema that is completely virtual, meaning it is not stored in the database? I have vari ...

javascriptnode.jsmongoose

Easily manipulate textboxes by dynamically adding or deleting them and then sending the data to a

Can you provide a simple example of how to dynamically add and remove textboxes and then display the results? I envision it like this: [Empty Textbox][Add button] When 'Value1' is entered into the textbox and 'add' is clicked, it s ...

phpjavascriptjqueryhtml

Explore the intricacies of complex hierarchies

<table id="financial101_tab1" class="dxrpControl_Moderno dxrpWithoutHeader_Moderno"> <tbody> <tr> <td id="financial101_tab1_RPC" class="dxrp dxrpcontent"> <input id="BlockControlfinancial101_tab1ATI" type= ...

javascriptjqueryhtmlcssclass

Automated accounts generated through Javascript and Ajax

To prevent accounts created by bots, I have implemented a simple Javascript function to change the ID of the form: setTimeout(function() { $("#FormAccountCreateTmp").attr("id", "FormAccountCreate"); }, 5400); After 5.4 seconds, the form originally with ...

javascriptphpbotsaccountmatomo

Modifying the primary color theme does not impact the color of the buttons

"@mui/material": "^5.5.3" Hello there, I am currently in the process of customizing my MUI form using values imported from SCSS variables. Everything appears to be functioning correctly (I can see the values being passed in devtools) e ...

javascriptreactjsmaterial-ui

Encountering difficulties when attempting to upload to Google Cloud using a signed URL

Seeking help to troubleshoot why the video upload is not working as expected. I am able to successfully connect to my bucket using a signedURL, but when trying to upload the video, it's not functioning properly. const submitVideo = async () => { ...

javascriptreactjsgoogle-cloud-storage

What is a suitable alternative to forkJoin for executing parallel requests that can still complete even if one of them fails?

Is there a more robust method than forkJoin to run multiple requests in parallel and handle failed subscriptions without cancelling the rest? I need a solution that allows all requests to complete even if one fails. Here's a scenario: const posts = th ...

javascriptangulartypescriptrxjsobservable

Using jQuery and Ajax to efficiently handle the retrieval of large files while browsing

I have some large text files that are potentially multiple GB in size, and I am looking for a way to view them within a div element. The idea is to make an AJAX request for a more manageable chunk of the file, have the AJAX script (preferably in PHP) inte ...

javascripthtmlajaxlarge-files

Using multiple images in jspdf

I need assistance in generating a PDF file with multiple images. I can successfully add one image to the PDF document, but I am struggling to include more than one image. I believe I may need to implement a loop, but I am unsure of how to do so. Can some ...

javascriptjqueryangularjspdfjspdf

adding <script> elements directly before </body> tag produces unexpected results

While following a tutorial, the instructor recommended adding <script> tags right before the </body> to enhance user experience. This way, the script will run after the entire page content is loaded. After implementing the code block as sugges ...

javascripthtmldom

Utilize jQuery to initiate an AJAX request based on the data retrieved from a previous AJAX call, then retrieve the resulting array

When the page loads, I initiate an ajax call and receive an array in response. For each element with the name groupId in this array, I must make another ajax call to fetch the group's name and notes. My objective is to create a final array by combini ...

javascriptjqueryajax

What causes variations in versions displayed by Node.js?

What causes this error to appear when using node version v16.17.1? https://i.sstatic.net/yJdEx.png ERROR: npm is known not to run on Node.js v10.19.0 UP--- I had multiple versions of node installed, with the default being an older version. I was able t ...

javascriptnode.js

Why does isotope cause strange changes in element styles that disrupt the layout?

I am facing an issue where I want to align different divs with background images next to each other without any spacing, similar to this: https://jsfiddle.net/71qpceqb/ Currently, I am using Bootstrap's row and col to achieve this layout. In the pr ...

javascriptjqueryhtmlcssjquery-isotope

In a production setting, Remix js is experiencing a 403 error when attempting to make a POST request, although it functions properly in a local

While working on my remix.js project, I encountered a 403 forbidden error when making a POST request in the production environment. However, everything works fine in the local environment. Here is the request payload Below are the details of the error, p ...

javascriptnode.jsremix.run

Bandcamp API sales data retrieval feature

Looking for assistance with a call to the Bandcamp API. Every time I request /http://bandcamp.com/api/sales/1/sales_report/, I receive this message in the response: /"error_message":"JSON parse error: 757: unexpected token at ''/ ...

javascriptjsonapigoogle-apps-script