I'm facing an issue with two bootstrap pop-out carousels that are overlapping and cannot be utilized separately. What steps can I take to resolve this problem?

At the moment, I have set up two Bootstrap carousels with buttons to activate each one. However, when either button is clicked, both slide shows appear overlapping, causing me to lose control over them independently and making the design unappealing.

You can access the code containing the two buttons on my CodePen: click here

Here is what I have implemented so far:

<div class="container-fluid bg-5 text-center" id = "container-2">
        <h2 class="margin about" style="color: #cdcdcd;">Portfolio</h2>
        <div class = "row">
            <div class = "col-md-4">
                <div class = "well">
                    <h1> Click Me 1 </h1>
                    <!-- Large modal -->
                    <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON1</button>
                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
                                            <div class="carousel-caption">
                                                One Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Controls -->
                                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class = "col-md-4">
                <div class = "well">
                    <h1> Click Me 2 </h1>
                    <!-- Large modal -->
                    <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">BUTTON 2</button>
                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
                                            <div class="carousel-caption">
                                                One Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
                                            <div class="carousel-caption">
                                                Another Image
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Controls -->
                                    <a class="left carousel-control" href="#carousel-example-generic2" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                    </a>
                                    <a class="right carousel-control" href="#carousel-example-generic2" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Upon clicking the first or second button, both slide shows open simultaneously, rather than displaying separate ones as intended for a portfolio page. Can someone help me resolve this issue? Your assistance would be highly appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

When customizing your buttons, make sure to use data-target="#id1" instead of 

data-target=".bs-example-modal-lg"
. This way you can target a specific id and adjust it accordingly in your modal settings.

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

Implementing Dynamic Styling Using Parent Component in React Native

I am facing an issue with a <Text> component that is receiving a style through props... TextFile.js: <Text style={styles.text}> This is a line of text and this might be a second line </Text> screenFile.js: <View style={styles.v ...

javascriptreactjsreact-native

Break down the POST array into separate variables

I am currently working on coding a form using jQuery .post. The processing file contains the code: print_r($_POST); This code generates the dynamic output below: Array ( [data] => capacity=50-1000+people&bookingdate=17%2F04%2F2012&grade=1+sta ...

phpjquery

transforming html into json using PHP

I am encountering an issue where I am making a PHP request and receiving the response in HTML format. How do I go about converting this response to JSON format? case 'getzipcode': $CITY= @$_POST['city']; $STREET= @$_POST['street& ...

phphtmljsonrequest

Experience the frustration when the Ruby on Rails Open Modal Box Link fails to work. Stay tuned for the latest update on the link

My goal is to have a Modal Popup Box open when a specific link is clicked on my page. Here is the code I added to my view file: <%= link_to_remote '+ Add Discount', :url => {:controller => "parent_wise_fee_payments", :action => "ne ...

javascriptjqueryruby-on-railsrubylink-to-remote

Tips for eliminating flutter for static menu with easyResponsiveTabs.js

Experiencing a flickering issue with the fixed menubar and easyResponsiveTabs.js in my project when scrolling down. Attempted to resolve it using jquery.noConflict(), but without success. Would appreciate any guidance on how to address this problem. ...

javascriptjquerycss

JQuery submitting a partial view form displays an empty page along with a JSON response

I am working on an Edit function in MVC4 public ActionResult Edit(UserGroup usergroup) { usergroup.created_date = DateTime.Now; usergroup.modified_date = DateTime.Now; db.Entry(usergroup).State = EntityState.Mod ...

javascriptjqueryhtmlasp.net-mvc-4

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

javascriptjquery

Incorporating elements into an Android app using PhoneGap and JavaScript

Below is the code snippet where I am attempting to display and add an element from JavaScript to the Android emulator. However, I am not seeing the text "hello world" displayed again. Can someone help spot the error in my code? <html> <head> & ...

androidjqueryjquery-mobilecordova

What should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

The background image in CSS fails to display when a relative path is utilized

Currently, I am working on a JavaFX project which has the following file structure (CEP serves as the root directory): CEP +img menu.jpg +src +css_files MainMenu.css The main objective is to set the background image from the img dir ...

cssjavafx

Partial views within a nested hierarchy are not updating as expected

I am currently working on a partial view that has the following structure: @model ComPost.Core.CommandsAndQueries.Contract.DataContract.FinalizeScreenDTO <div class="row"> <p> <table id="ProductTable"> <tr><td> ...

jqueryajaxasp.net-mvcpartial-viewsrenderaction

Tips for successfully retrieving a variable from a function triggered by onreadystatechange=function()

Combining the ajax technique with php, I'm looking to extract the return variable from the function called by onreadystatechange. A java function triggers a call to a php script upon submission, which then validates certain data in the database and r ...

javascriptajax

Using Ajax and Session Variables for a Worksafe Filter to selectively hide images

Creating a photography portfolio with some images containing nudity prompts the need to hide them by default until the user chooses to reveal them by clicking a "Toggle Worksafe Mode" button. To prevent "confirm form resubmission" errors when users naviga ...

javascriptphpajaxsessionsession-variables

Tips for achieving a standard dropdown appearance in a collapsed navbar with Bootstrap split button dropdown

Trying to create a navbar with a split dropdown button has been a challenge. The design either goes awry when the screen is narrow and the navbar is hidden behind the toggle, or it doesn't look right on a wider screen when the navbar is expanded. Cur ...

javascripthtmljquerycssbootstrap-5

"Can anyone explain why my plugin is displaying the error message 'Definition for rule was not found'

Introducing my custom plugin You can find the plugin here: @bluelovers/eslint-plugin For the base config, visit: https://github.com/bluelovers/ws-node-bluelovers/blob/master/packages/eslintrc/.eslintrc.json When it comes to the runtime user config: { ...

javascriptnode.jstypescripteslint

Guide for displaying a React Bootstrap modal within a function

Currently, I am integrating a React Bootstrap modal popup into my project. The goal is to have the modal display when a user submits a form. The specific modal component I am using is called SaveConfirmationModal. import { Button, Modal} from "react- ...

javascriptreactjsreact-bootstrap

In NextJS with SASS modules, the selector ":root" is considered impure since pure selectors are required to include at least one local class or id within them

Lately, I made the switch to using modules in my next.js project. However, I keep encountering an error in my newly created .module.scss files that says: "Selector ":root" is not pure (pure selectors must contain at least one local class or id)". It seems ...

csssassnext.jscss-modulesreact-css-modules

CSS tooltip box with embedded HTML for interactive content display

After doing some research, I came across a code that almost does what I need. The code allows me to hover over text and display a tooltip box with HTML content such as images and links. It worked perfectly with jQuery, but the challenge is that eBay doesn ...

htmlcsstooltipcss-transitions

Firebase 9: Access Denied - Realtime Database Security Breach

Currently working on a chat application using Vue3 and Firebase 9, everything is functioning well except for the delete function. An error message appears in the console: @firebase/database: FIREBASE WARNING: set at /message/-MzxBJXezscUw4PbEAys failed: pe ...

javascriptreactjsfirebasevue.jsfirebase-realtime-database

Adjust the color of text using the <text-shadow> technique

The default 'text-shadow' for white text in a <div> is defined as follows: When the text color is changed to #627CA9 by clicking on it, I want the 'text-shadow' to be updated to match the new color. text-shadow: 0 0 1px #FFFFFF, ...

javascripthtmlcss