Bootstrap 5 make two carousels slide at the same time when clicking the next and previous buttons only

Question

I am using bootstrap 5 carousels. I need two carousels to slide at the same time. I used data-bs-target=".carousel" but it does not work. My code is 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="carouselExampleControls2" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="carousel-card">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h3 class="section-text">
                                                Petite Collection
                                            </h3>
                                            <hr class="mb-3">
                                        </div>
                                        <div class="col-md-6">
                                            <h2>
                                                Spoiled <br>
                                                Lashes
                                            </h2>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="card-price">
                                                $16.00 <span>USD</span>
                                            </p>
                                            <a href="#" class="btn btn-main">Add to bag</a> <a href="#" class="btn btn-main btn-fav ms-2"><i class="bi bi-heart"></i></a>
                                        </div>
                                        <div class="col-md-12">
                                            <hr class="mt-3">
                                            <div class="card-reviews mb-4">
                                                #reviews
                                            </div> 
                                            <div class="description">
                                                <p>
                                                    Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
                                                </p>
                                            </div>
                                            <hr class="mt-3">
                                            <a href="#" class="btn-link">Learn more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="carousel-card">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h3 class="section-text">
                                                Petite Collection
                                            </h3>
                                            <hr class="mb-3">
                                        </div>
                                        <div class="col-md-6">
                                            <h2>
                                                Spoiled <br>
                                                Lashes
                                            </h2>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="card-price">
                                                $16.00 <span>USD</span>
                                            </p>
                                            <a href="#" class="btn btn-main">Add to bag</a> <a href="#" class="btn btn-main btn-fav ms-2"><i class="bi bi-heart"></i></a>
                                        </div>
                                        <div class="col-md-12">
                                            <hr class="mt-3">
                                            <div class="card-reviews mb-4">
                                                #reviews
                                            </div> 
                                            <div class="description">
                                                <p>
                                                    Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
                                                </p>
                                            </div>
                                            <hr class="mt-3">
                                            <a href="#" class="btn-link">Learn more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="carousel-card">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h3 class="section-text">
                                                Petite Collection
                                            </h3>
                                            <hr class="mb-3">
                                        </div>
                                        <div class="col-md-6">
                                            <h2>
                                                Spoiled <br>
                                                Lashes
                                            </h2>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="card-price">
                                                $16.00 <span>USD</span>
                                            </p>
                                            <a href="#" class="btn btn-main">Add to bag</a> <a href="#" class="btn btn-main btn-fav ms-2"><i class="bi bi-heart"></i></a>
                                        </div>
                                        <div class="col-md-12">
                                            <hr class="mt-3">
                                            <div class="card-reviews mb-4">
                                                #reviews
                                            </div> 
                                            <div class="description">
                                                <p>
                                                    Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
                                                </p>
                                            </div>
                                            <hr class="mt-3">
                                            <a href="#" class="btn-link">Learn more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            
            </div>
            <div class="col-md-6 p-right p-0 ">
                <div class="right-block">
                    
                    <div id="carouselExampleControls" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="carousel-img-container jalign">
                                    <img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="carousel-img-container jalign">
                                    <img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="carousel-img-container jalign">
                                    <img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
                                </div>
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target=".carousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target=".carousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>

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

option 2 solved my problem, https://stackoverflow.com/questions/20710222/bootstrap-carousel-how-to-slide-two-carousel-sliders-at-a-same-time — Carina, Dec 03 '21 at 02:13

Cutey from Cute Code · Answer 1 · 2021-12-02T23:06:57.693

0

Delete it all and begin again. Your carousel will surely be easier. Nothing in your code is making life easy for you. Columns inside Columns inside Rows which are also Columns and all with various additional Class....... Let's start again....

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

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

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

edited Dec 02 '21 at 23:06

answered Dec 02 '21 at 22:52

Cutey from Cute Code

1,065
3
13

Thank you for your comment. I tried that but unfortunately, it does not answer my question. – Carina Dec 03 '21 at 01:58

Bootstrap 5 make two carousels slide at the same time when clicking the next and previous buttons only

1 Answers1