CODEWITHSUNDEEP
vue.jsbootstrap-5
user9741470
user9741470

Reputation: 179

create card carousel using bootstrap 5.2 carousel and vue 3

I have this css code in my vue 3 component template

        <div class="row mt-5 pt-5 m-0" id="carouselRow">
            <!-- <div class="col-sm-12 col-md-12 col-lg-12 p-md-0"> -->
                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="true">
                    <!-- <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    </div> -->
                    <div class="carousel-inner">
                        <div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
                            <div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
                                <div class="col-md-4 col-lg-4">
                                    <div class="card">
                                        <img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
                                        <div class="card-body">
                                            <h5>{{ doctor.name }} {{ doctor.surname }}</h5>
                                            <p>{{ doctor.category }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>                  
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            <!-- </div> -->
        </div>

I want to create a simple card carousel but at the moment I'm unable to use the right markup and I will see only one card in a crappy way, but on the dom the loop has rendered all the cards I want display.

How I can make a v-for loop that works fine and will render 3 bootstrap 5.2 cards for each carousel item into the array that will be looped?

Upvotes: 3

Views: 1028

Answers (1)

Michael
Michael

Reputation: 353

I think you placed the v-for on the wrong item. Vue is rendering now rendering this several times:

<div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
    <div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
        <div class="col-md-4 col-lg-4">
           <div class="card">
              <img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
                 <div class="card-body">
                    <h5>{{ doctor.name }} {{ doctor.surname }}</h5>
                    <p>{{ doctor.category }}</p>
                 </div>
           </div>
        </div>
    </div>
</div>

But you only need this:

<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
  <div class="col-md-4 col-lg-4">
     <div class="card">
        <img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
        <div class="card-body">
        <h5>{{ doctor.name }} {{ doctor.surname }}</h5>
         <p>{{ doctor.category }}</p>
     </div>
   </div>
  </div>
</div>

Try it with this:

<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard"  v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">

Upvotes: 2

Related Questions