I want to display the 4 info box on one slide likewise other. How to achieve this?

[Dhanashree]

I used carousel I want to display the 4 box of information on one slide horizontally one after another like wise remaining 4 in next slide is around 32 info boxes I want to show on the 8 slide. Then I used data model to fetch the info data like name, descriptions, title . so how to display the 4 review boxes in one slide.

[Rahulj08]

Hi @Dhanashree,

Thank you so much for reaching out.

You can easily create a carousel in Builder.io, and I’m happy to share two simple methods to help you with that:

Method 1: Using the Builder Visual Editor

1. Drag and drop a Carousel block onto your page.
2. Inside the Carousel Slide, add a Columns block.
3. Set the Columns block to display 4 columns.
4. Inside each column, place your review box.
5. Duplicate the Carousel Slide as needed to accommodate all your reviews (for example, 8 slides for 32 review boxes).

Method 2: Using AI in the Builder Editor
You can also take advantage of the AI feature in the Builder Visual Editor. Just describe your requirements to the AI, and it will help you generate the content structure quickly and easily.

Please feel free to let me know if you’d like guidance on using the AI feature—I’ll be happy to assist you further.

Warm regards,

Rahul Joshi

[darcie.eves]

HTML :

Assuming you’re using a templating engine (like Django, Flask, EJS):

html

CopyEdit

<div id="infoCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    {% for slide in info_data|slice:":32"|batch:4 %}
      <div class="carousel-item {% if forloop.first %}active{% endif %}">
        <div class="d-flex justify-content-between">
          {% for item in slide %}
            <div class="card" style="width: 23%;">
              <div class="card-body">
                <h5>{{ item.title }}</h5>
                <h6>{{ item.name }}</h6>
                <p>{{ item.description }}</p>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>

  <button class="carousel-control-prev" data-bs-target="#infoCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" data-bs-target="#infoCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

---

Notes:

• info_data|batch:4 splits into groups of 4.
• 32 items → 8 slides.
• Add Bootstrap CSS/JS if not already included.

Let me know your tech stack if you want it in React, Angular, etc.