slider card product

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

Tags: Card

Author Juan Antonio González Hernández

715

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<div class="swiper-slide">
            <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="click-helper">
            <div class="hand">
              <i class="fas fa-hand-pointer"></i>
            </div>
          </div>
          <div class="drag-helper">
            <div class="hand-drag">
              <i class="fas fa-hand-pointer"></i>
            </div>
          </div>
          <div class="swiper-slide">
            <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="swiper-slide">
            <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 class="swiper-slide">
            <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="swiper-slide">
            <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="swiper-slide">
            <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>

</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>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

More Examples

User Profile Card with Social Icons using Bootstrap 5 (without connect button)

Author:
Ranadhir Debnath

1 year ago

3.5k

v.5.3
Product Modal with JS

Author:
java stories story

10 months ago

1.5k

v.5.3
Restaurant Dish Detail

Author:
Code Bro io

1 week ago

30

v.5.3
skill info

Author:
Gana JNsksk

2 months ago

301

v.4.6
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

1 year ago

2k

v.4.6
contact

Author:
lamiajahan

1 week ago

48

v.4.6
Cart Hero Pro

Author:
Juan Antonio González Hernández

4 months ago

872

v.5.3
Music speakers status

Author:
Jonathan

1 year ago

1.2k

v.5.3
E-com Cart Page

Author:
Creative Araf

1 week ago

35

v.5.3
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

1 year ago

4.8k

v.5.3
User Profile Card with Social Icons using Bootstrap 5

Author:
Anonymous

1 year ago

8k

v.5.3
Card w/ gradient background
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Prajwal Hallale

2 years ago

5.3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent