Carrousel banner product

It's a carousel; clicking on its categories opens a banner with the product.

This bootstrap css example is contributed by Juan Antonio González Hernández, on 13-Mar-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Card Banner Carousel

Author Juan Antonio González Hernández

373

v.5.3

Fork Fullscreen

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#panaderia">
                  <img src="https://images.unsplash.com/photo-1509440159596-0249088772ff">
                  <div class="category-title">Panadería</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#cafeteria">
                  <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085">
                  <div class="category-title">Cafetería</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#carniceria">
                  <img src="https://images.unsplash.com/photo-1607623814075-e51df1bdc82f">
                  <div class="category-title">Carnicería</div>
                </div>
              </div>

</div>
          </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#refrigeracion">
                  <img src="https://images.unsplash.com/photo-1586201375761-83865001e31c">
                  <div class="category-title">Refrigeración</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#supermercado">
                  <img src="https://images.unsplash.com/photo-1542838132-92c53300491e">
                  <div class="category-title">Supermercado</div>
                </div>
              </div>

<div class="col-md-4">
                <div class="category-card" data-bs-toggle="collapse" data-bs-target="#coccion">
                  <img src="https://images.unsplash.com/photo-1556911220-bff31c812dba">
                  <div class="category-title">Cocción</div>
                </div>
              </div>

</div>
          </div>

</div>

</div>

</section>

<h2 class="banner-title mb-3">
                Equipos para Panadería
              </h2>

<p class="banner-text">
                Descubre hornos industriales, amasadoras y vitrinas diseñadas para mejorar
                la producción y calidad en tu panadería.
              </p>

</div>

<h5 class="fw-bold mb-3">
                    Horno de convección Digitop 10 bandejas
                  </h5>

<p class="text-muted mb-3">
                    Que la experiencia del panadero se refleje en cada pan. El horno de convección Digitop 10 bandejas
                    ofrece una cocción uniforme y eficiente, ideal para panaderías que buscan calidad y productividad.
                  </p>

<button class="btn btn-custom px-4 py-2 rounded-pill">
                      Ver producto
                    </button>

</div>

<h2 class="banner-title mb-3">
                Equipos para Cafetería
              </h2>

<p class="banner-text">
                Descubre maquinaria especializada para preparar el mejor café, desde molinillos hasta sistemas de
                servido profesional.
              </p>

</div>

<h5 class="fw-bold mb-3">
                    Cafetera automática Delecta La San Marco
                  </h5>

<p class="text-muted mb-3">
                    Que la experiencia del barista se refleje en cada taza. La cafetera automática Delecta La San Marco
                    ofrece una preparación de café de alta calidad, ideal para cafeterías que buscan impresionar a sus
                    clientes con cada servicio.
                  </p>

<button class="btn btn-custom px-4 py-2 rounded-pill">
                      Ver producto
                    </button>

</div>

<h2 class="banner-title mb-3">
                Equipos para Carnicería
              </h2>

<p class="banner-text">
                Descubre maquinaria especializada para preparar el mejor carne, desde cortadoras hasta sistemas de
                procesamiento profesional.
              </p>

</div>

<h5 class="fw-bold mb-3">
                    Rebanadora Kacier RK-300
                  </h5>

<p class="text-muted mb-3">
                    Que la experiencia del carnicero se refleje en cada corte. La rebanadora Kacier RK-300 ofrece un
                    corte preciso y eficiente, ideal para carnicerías que buscan calidad y productividad en su servicio.
                  </p>

<button class="btn btn-custom px-4 py-2 rounded-pill">
                      Ver producto
                    </button>

</div>

</div>
  </div>

More Examples

scroll animation image with title

Author:
Juan Antonio González Hernández

3 months ago

483

v.4.6
Hero slider

Author:
Juan Antonio González Hernández

2 months ago

898

v.5.3
mission and vission
je copy korbe se chor

Author:
Fitar Ahmed

1 week ago

41

v.4.6
Our Clients

Author:
Shahriar Noyon

1 week ago

45

v.4.6
serviceComplate

Author:
Sahin Miah

1 week ago

45

v.4.6
Our Existing Clients Section

Author:
Shahriar Noyon

1 week ago

73

v.4.6
Personal Info Section

Author:
Tanvir fahad

1 week ago

59

v.4.6
Skills & Expertise

Author:
Shahriar Noyon

1 week ago

57

v.4.6
service list
do not copy

Author:
Fitar Ahmed

1 week ago

26

v.4.6
special skill
dont copy

Author:
Fitar Ahmed

1 week ago

27

v.4.6
Sign in form with bootstrap 5
Beautiful sign-in card with Bootstrap 5

Author:
Prajwal Hallale

1 year ago

9k

v.5.3
our services

Author:
Gana JNsksk

1 week ago

40

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent