How to sync two carousels in Bootstrap 5 to slide simultaneously with just one click on the next and previous buttons

I am trying to implement dual sliding carousels using Bootstrap 5, but I am encountering issues with getting them to slide simultaneously. Despite incorporating

data-bs-target=".carousel"
, the synchronization isn't working as intended in my code snippet below:

<div class="section-04">
    <div class="container-fluid">
        <div class="row col-reverse">
            <div class="col-md-6 p-left">
                <div class="left-block">
                    <div class="row b-top">
                        <div class="col-md-6">
                            <h3>
                                The <br>
                                Most <br>
                                Wanted
                            </h3>
                        </div>
                        <div class="col-md-6">
                            <p>
                                Current favorites, new icons and the best sellers from this month.
                            </p>
                            <a href="#" class="btn btn-main move-btn">Explore More</a>
                        </div>
                    </div>
                    <div id=& quot; carouselExampleControls2& quot; class=& quot; carousel   slide   carousel-sync& quot; data - bs - interval = & quot; false& quot; data - bs - ride = & quot; carousel& quot; & gt ;
                                    & lt;
                                        div class =& quot; carousel-inner & quot; > 
                                            & lt;
                                                div class =& quot; carousel-item active & quot; > 
                                                    & lt;
                                                        div class =& quot; carousel-card & quot; > 
                                                            & lt;
                                                                div class =& quot; row & quot; > 
                                                                    & lt;
                                                                        div class =& quot; col-md-12 & quot; > 
                                                                            & lt;
                                                                                h3 class =& quot; section-text & quot; > Petite Collection
                                                                                    & lt; /h3 >
                                                                                    & lt;
                                                                                        hr class =& quot; mb-3 & quot; >
                                                                                            & lt;
                                                                                                /div >
                                                                                                & lt;
                                                                                                    div class =& quot; col-md-6 & quot; > 
                                                                                                        & lt;
                                                                                                            h2 & gt; Spoiled & lt; br & gt; Lashes & lt; /h2 >
                                                                                                                & lt;
                                                                                                                    /div >
                                                                                                                    & lt;
                                                                                                                        div class =& quot; col-md-6 & quot; > 
                                                                                                                            & lt;
                                                                                                                                p class =& quot; card-price & quot; > $16.00 & lt; span & gt; USD & lt; /span >

                                                         ...

Answer №1

Why not delete everything and start fresh? A simpler carousel awaits you. Your code seems to be complicating things for no reason. Layers of columns within columns, nested inside rows and all with different classes... Let's hit the reset button and try again.

<section>
 <div class="container">
   <div clss="row">

     <!-- Carousel from GetBootstrap.com Version 5 -->

   </div>
 </div>
</section>

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

How can I display the most recent offcanvas opening at the top of the page?

The issue I'm facing is related to the offcanvas3 opening behind offcanvas2. It appears like this: $("#open-offcanvas2").on("click", function(){ $("#offcanvas2").offcanvas("show") }) $("#open-offcanvas1").on("click", function(){ $("#offcanvas1" ...

Passing form values from JavaScript to a JSP page - a comprehensive guide

I am working on a sample HTML page that includes inline JavaScript for calculating geocodes and retrieving latitude and longitude values. My question is, how can I submit all the form values along with the latitude and longitude returned from the showlocat ...

Loading Embedded Content with ReactJS

Currently, I am developing a one-page website with ReactJS. Each section of the site is created as individual React components, which are displayed conditionally based on the user's tab selection in the navigation bar. As part of my design, I have in ...

Tips for postponing the execution of following tasks until the completion of the setState and ensuring that they are reliant on

I'm encountering an issue with the useEffect hook in my React app that uses useState. Here's the code snippet: const [jobTypes, setJobTypes] = useState([]); const getJobTypes = async () => { try { const response = await fetch(&a ...

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

Tips for minimizing padding and margin in a Bootstrap template

I recently downloaded the page from "https://getbootstrap.com/docs/5.3/examples/heroes/", and I've removed all sections in index.html except for the "hero" section and the "sign-up form". However, there is too much white space between these two elemen ...

Dealing with an empty request.FILES using FileUploadParser in Django Rest Framework and Angular file upload technique

Uploading files in an angular view can sometimes be tricky, especially when using templates. The code snippet below shows how to upload multiple and single files using Angular File Upload library. Multiple <input type="file" name="file" nv-file-select= ...

Angular is programmed to detect any alterations

Upon detecting changes, the NgOnChanges function triggers an infinite service call to update the table, a situation that currently perplexes me. Any assistance on this matter would be greatly appreciated. Many thanks. The TableMultiSortComponent functions ...

Discover the location by determining the distance from established points

Before I get redirected to this particular question, let me clarify that while I've come across it, I am unable to comprehend its content (I wish I could). What I'm really seeking is a straightforward method (bearing in mind my limited math skill ...

What is the best way to save a JSON stream to a file in Node.js?

I am facing an issue with writing a complete JSON object to a file as it is received. Currently, I am using const file = fs.createWriteStream('./example.file'); var inputStream = JSON.parse(generatedData); fs.write(inputStream+"\n"); The d ...

What is the significance of using the "why" in the href property within the

I need help understanding why the plus "+" is used before and after myUrl in the function .not. Even though it works fine with or without the +, I am curious about why it was included in the code snippet. <script type="text/javascript"> $(documen ...

Cannot locate AngularJS + Typescript controller

I'm encountering an error while attempting to integrate TypeScript with AngularJS. The issue I'm facing is: Error: [$controller:ctrlreg] The controller named 'MyController' has not been registered Does anyone have any insights on what ...

concealing the dropdown in React upon clicking outside of it

I have been delving into learning React by challenging myself with a React problem. The code challenge I'm facing involves trying to close a drop-down when clicking outside of it. Despite my efforts to debug, I haven't had much luck in solving th ...

Using React Higher Order Components to transmit data attributes to the initial child/element within the encapsulated component

Presently, I have a custom higher-order component structured in the following manner: export const withAttrs = (WrappedComponent) => { const ModifiedComponent = (props) => ( <WrappedComponent {...props} data-test-id="this-is-a-element&q ...

Local host's attempt to retrieve data from an external site via an Axios GET request was rejected

I'm currently attempting to execute a GET request on an external website in order to scrape some information. Unfortunately, my axios GET request is returning a connection error. I suspect that this issue may be related to the fact that I am sending t ...

When attempting to push `content[i]` into an array in AngularJS, it is flagged

In my JSON data, I have the following structure: var data = [{ id: 1, name: 'mobile', parentid: 0, limit:3 }, { id: 2, name: 'samsung', parentid: 1 }, { id: 3, name: 'moto', parenti ...

Guide on programmatically choosing an option within a variable with the help of jQuery

Imagine having a variable named html, which holds select options like this: var html = '<select>'+ '<option value="10">10</option>'+ '<option value="20">20</option>'+ ...

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

Having difficulty resolving a typescript error related to batch.update in my code. const batch = db.batch(); const listingDoc = await db.collection("listings").doc(listingID).get(); const listingData = listingDoc.data( ...

Shorten the content while preserving the HTML using JavaScript

When printing a string containing HTML links, I need to truncate the visible text while preserving the link structure. Simply using a substring method would disrupt the HTML tags in the string. I aim to display only 100 characters but also remove any inc ...

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

Looking to decipher data post retrieval from mongoDb. The retrieved data comprises encrypted and unencrypted sections. app.get("/receive", async (req, res) => { try { const data = await UploadData.find(); const decryptedData = data. ...