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

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

Product card component using Bootstrap 5

Author:
Mateo Rojas

1 year ago

2.6k

v.5.3
Expanding Cards Horizontal

Author:
Juan Antonio González Hernández

1 month ago

158

v.4.6
Glowing Card
glowing effect and smooth hover animation

Author:
Prajwal Hallale

2 years ago

3.7k

v.5.3
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

1 year ago

1.2k

v.4.6
for me
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Jimmy Mercury

1 year ago

1.7k

v.5.3
Hero slider

Author:
Juan Antonio González Hernández

1 week ago

122

v.5.3
Product Card
A product card layout for an e-commerce website with an image at the top

Author:
Juan Martinez

1 year ago

16.8k

v.5.3
test

Author:
Anonymous

1 month ago

82

v.5.3
Expanding Cards
Expanding Cards

Author:
Rami AlAjo

1 year ago

4.2k

v.4.6
Product Card with Modal

Author:
java stories story

6 months ago

1.9k

v.5.3
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

1 year ago

1.8k

v.4.6
Cart Hero Pro

Author:
Juan Antonio González Hernández

1 week ago

67

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent