What is the best way to make multiple carousels work simultaneously?

For example, imagine two carousels occupying the same location but one is always hidden. There are two buttons above to toggle either carousel on:

<div class="row">
                <div class="col-lg-12">

                    <div class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div id="floorsCarousel" class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                            </div>
                            <div class="item">
                                 <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                            </div>
                            <div class="item">
                                <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                            </div>
                            <div class="item">
                                <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                            </div>
                        </div>
                    </div>

The JavaScript code that I'm using doesn't seem to be functioning as expected. Here's an excerpt from my JS file:

var floorsCarousel = document.getElementById("floorsCarousel");
    var spaceCarousel = document.getElementById("spaceCarousel");

    function floorPlans() {
        if (floorsCarousel.style.display==="none") {
            floorsCarousel.style.display="inherit";
        }
        if (spaceCarousel.style.display!=="none") {
            spaceCarousel.style.display="none";
        }
        return false;
    }

    function spacePlans() {
        if (spaceCarousel.style.display==="none") {
            spaceCarousel.style.display="inherit";
        }
        if (floorsCarousel.style.display!=="none") {
            floorsCarousel.style.display="none";
        }
        return false;
    }

Link to JSFiddle

javascripthtmlcsstwitter-bootstrapcarousel

Answer №1

I've come up with a solution that meets your requirements, which you can find here. I've implemented "buttons" to toggle between different carousels and enclosed each carousel in a div with attributes id="Car-#" class="Car-toggle"

HTML

<div class="row">
    <button class="toggleCar" data-for="Car-1">Toggle 1</button>
    <button class="toggleCar" data-for="Car-2">Toggle 2</button>
    <div class="col-lg-12">
        <div id="Car-1" class="Car-toggle">carousel One
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div id="floorsCarousel" class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                    </div>
                </div>
            </div>
        </div>
        <div id="Car-2" class="Car-toggle">carousel Two
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div id="floorsCarousel" class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript (JQuery with bootstrap)

$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
    $('.Car-toggle').hide();
    $('#'+CarWrapperName).show();
});

//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();

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

Initiate the preloader function with a GIF loading image to display while my PHP script processes and retrieves data

This PHP file is responsible for downloading image and data files from the server. <?php header("Cache-Control: no-cache, must-revalidate"); //header("Expires: Tue, 25 sep 2012 09:00:00 GMT+5.30"); header("Content-Type: applica ...

jqueryhtmlajaxpreloading

Navigating through this object with PUG and Express: a step-by-step guide

I am currently working on a basic blockchain project to practice my skills with nodejs. I have created a blockchain object that consists of a block class, and now I want to loop through this object using pug. app.get('/', function(request, respon ...

javascriptnode.jsexpresspugblockchain

libxml2 - deleting a child node without affecting its grandchildren

I'm working with libxml2 to parse HTML content and need to remove specific formatting tags such as <center>, while retaining their content (e.g. a hyperlink). This requires removing particular child nodes from my xmlNodeSet, while preserving th ...

htmlclibxml2

Retrieving intricate JSON data from a specific web address

I need assistance in extracting and printing the date value from the JSON content available at the specified URL. Specifically, I am looking to retrieve the date value of "data.content.containers.container.locationDateTime" only if the "data.content.conta ...

javascriptphpjqueryjson

Learn how Angular 2 allows you to easily add multiple classes using the [class.className] binding

One way to add a single class is by using this syntax: [class.loading-state]="loading" But what if you want to add multiple classes? For example, if loading is true, you want to add the classes "loading-state" and "my-class". Is there a way to achieve t ...

javascriptangularbinding

What is the process for validating a jQuery/AJAX form?

Can someone help me with validating my sign-up form? Even when there is no data entered, it still gets added to the database whenever the submit button is pressed. Here's my current code: <form id="signupform" class="form" method="post" action="#" ...

javascriptjqueryajax

Is there a way to utilize redux to trigger the opening of my modal when a button is clicked?

I'm facing a challenge with opening my modal using redux when clicking <CheckoutButton/>. Despite my efforts, the modal keeps appearing every time I reload the browser. I've reviewed my code but can't pinpoint the issue. What am I doin ...

javascriptreactjsdebuggingreduxreact-redux

Guide to saving a JSON array to a file using a writeStream in Node.js

I created a Node.js script to scrape data from a website, with the process involving iterating through pages to collect structured data. Every page yields an array of objects as the data I extract. My initial plan was to utilize the fs.createWriteStream( ...

javascriptjsonnode.jsfsnode-streams

Tips on ensuring iframe is consistently centered

I have a div element enclosing an iframe, and I am trying to always position it in the center. Here is my attempt on jsfiddle: jsfiddle I truly believe that someone could help because I am certain that it is something simple but I just can't figure i ...

htmlcssiframealignment

Optimize Your Website for Various Screen Sizes

Can anyone assist with centering my webpage on small screen sizes? Everything looks good at the normal width of 989px, but once it shrinks, it shifts to the left and leaves excess white space on the right. I've tried various methods to correct this is ...

csshtmlfluid-layout

Incorporating a for loop, ExpressJS and Mongoose repeatedly utilize the create method to generate

When users input tags separated by commas on my website, ExpressJS is supposed to search for those tags and create objects if they don't already exist. Currently, I am using a for loop to iterate through an array of tags, but only one object is being ...

javascriptnode.jsmongodbexpressmongoose

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...

javascriptreactjsmongodbnext.js

Uncovering Modified Form Elements Using jQuery

I am managing a form with the ID "search_options" and tracking changes in the form using the following code: $("#search_options").change(function() { // Bla Bla Bla }); Within this form, I have various inputs including one with the ID "p ...

javascriptjquery

Creating a Popup with a Hazy Background: A Step-by-Step Guide

I've been working on implementing a popup on my existing page that opens 4.5 seconds after the page loads. I want to add a blur effect to the background when the popup appears. I've tried various methods to add the blur effect to the main div, bu ...

javascripthtmlcsspopupblur

Why don't media queries take effect

After thoroughly reading all the @media topics on this site, it appears that the code should be functioning correctly. body { background-color: yellow; } @media screen and (min-width: 1080px;) and (max-width: 2000px;) { body { backgrou ...

cssresponsive-designmedia-queriesviewport

Issue with Restangular/angularjs object not refreshing after remove() operation

I am currently using Restangular within my AngularJS application. I have an index view that displays all messages, and I can edit and add messages to the list without any issues. However, when I attempt to use the remove() function on an element, the index ...

javascriptangularjsrestangular

Is there a setting causing Webpack to not rebuild when there are changes to the CSS?

I have configured postcss-loader and style-loader on webpack, and I am using webpack-dev-server. However, every time I make changes to the CSS, webpack does not rebuild automatically. The script for webpack dev server that I use in npm scripts: webpack-d ...

cssnode.jswebpackwebpack-dev-server

Scrolling up occurred upon opening the bootstrap modal

When a model is opened, the page automatically scrolls to the top and remains at the top when the model is closed. This HTML uses the Blade engine: <div class="row mt-0 name"> <a class="text-wrapper text-xs inviteeModel ...

htmlbootstrap-modallaravel-bladebootstrap-5

When it comes to responsive design, the CSS left and top properties may not always calculate as anticipated for an absolutely positioned element

Dealing with a responsive image inside a parent container, alongside an absolutely positioned element with higher z-index in the same container has proven to be problematic. While it works fine on a static design, making it responsive causes the pin to app ...

jquerycsshtmldictionaryresponsive-design

Custom HTML on Joomla causing carousel to vanish

I've encountered an issue with my Joomla website where my carousel images are disappearing. I have a code snippet from W3 Schools for an automatic banner that works perfectly fine when opened in a browser using Notepad++, but when inserted into a cust ...

javascripthtmlcssjoomlamodule