Live preview

Source code

html

<!-- E-commerce Featured Carousel -->
<div class="container py-4">
  <div id="ecommerceHeroCarousel" class="carousel slide carousel-fade shadow-sm rounded-5 overflow-hidden" data-bs-ride="carousel">
    <!-- Indicators -->
    <div class="carousel-indicators mb-4">
      <button type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide-to="0" class="active rounded-circle" aria-current="true" style="width: 12px; height: 12px;"></button>
      <button type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide-to="1" class="rounded-circle" style="width: 12px; height: 12px;"></button>
      <button type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide-to="2" class="rounded-circle" style="width: 12px; height: 12px;"></button>
    </div>

    <div class="carousel-inner">
      <!-- Slide 1 -->
      <div class="carousel-item active bg-light position-relative" style="min-height: 450px;">
        <div class="row align-items-center h-100 g-0">
          <div class="col-md-6 p-5 order-2 order-md-1">
            <div class="ps-lg-5 animate-content">
              <span class="badge bg-danger mb-3 px-3 py-2 rounded-pill shadow-sm">NEW SEASON</span>
              <h1 class="display-3 fw-bold text-dark mb-3">Wireless <br><span class="text-primary">Headphones</span></h1>
              <p class="lead text-muted mb-4">Experience crystal clear sound with active noise cancellation technology.</p>
              <h3 class="fw-bold mb-4 text-dark">$299.99 <del class="fs-6 text-muted fw-normal">$349.99</del></h3>
              <div class="d-flex gap-3">
                <a href="#" class="btn btn-primary btn-lg px-4 rounded-pill shadow">Shop Now <i class="bi bi-cart-plus ms-2"></i></a>
                <a href="#" class="btn btn-outline-dark btn-lg px-4 rounded-pill">Details</a>
              </div>
            </div>
          </div>
          <div class="col-md-6 order-1 order-md-2 text-center p-4">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=600&q=80" class="img-fluid rounded-4 animate-image" alt="Product" style="max-height: 400px; width: 100%; object-fit: cover;">
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item bg-dark position-relative" style="min-height: 450px;">
        <div class="row align-items-center h-100 g-0">
          <div class="col-md-6 p-5 order-2 order-md-1">
            <div class="ps-lg-5 text-white animate-content">
              <span class="badge bg-info mb-3 px-3 py-2 rounded-pill">TECH DEAL</span>
              <h1 class="display-3 fw-bold mb-3">Smart Watch <br><span class="text-info">Ultra Pro</span></h1>
              <p class="lead opacity-75 mb-4">Tracking your health metrics and notifications on the go.</p>
              <h3 class="fw-bold mb-4 text-info">$149.00</h3>
              <a href="#" class="btn btn-info text-white btn-lg px-5 rounded-pill shadow">Get Offer</a>
            </div>
          </div>
          <div class="col-md-6 order-1 order-md-2 text-center p-4">
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=600&q=80" class="img-fluid rounded-4 animate-image" alt="Product" style="max-height: 400px; width: 100%; object-fit: cover;">
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item bg-primary-subtle position-relative" style="min-height: 450px;">
        <div class="row align-items-center h-100 g-0">
          <div class="col-md-6 p-5 order-2 order-md-1">
            <div class="ps-lg-5 animate-content">
              <span class="badge bg-primary mb-3 px-3 py-2 rounded-pill">MEMBERS ONLY</span>
              <h1 class="display-3 fw-bold text-dark mb-3">Digital <br><span class="text-primary">Camera 4K</span></h1>
              <p class="lead text-muted mb-4">Capture every moment in stunning ultra-high definition.</p>
              <a href="#" class="btn btn-dark btn-lg px-4 rounded-pill shadow">Order Today</a>
            </div>
          </div>
          <div class="col-md-6 order-1 order-md-2 text-center p-4">
            <img src="https://images.unsplash.com/photo-1526170315876-ef6d86f883a2?auto=format&fit=crop&w=600&q=80" class="img-fluid rounded-4 animate-image" alt="Product" style="max-height: 400px; width: 100%; object-fit: cover;">
          </div>
        </div>
      </div>
    </div>

    <!-- Custom Slide Buttons -->
    <button class="carousel-control-prev custom-nav-btn ms-3" type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon rounded-circle p-4 bg-white shadow-sm border" aria-hidden="true" style="filter: invert(1);"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next custom-nav-btn me-3" type="button" data-bs-target="#ecommerceHeroCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon rounded-circle p-4 bg-white shadow-sm border" aria-hidden="true" style="filter: invert(1);"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

<style>
  /* Carousel Item Styling */
  .carousel-item {
    background-color: #f8f9fa;
    overflow: hidden;
  }

  /* Content Animations */
  .animate-content {
    animation: slideInLeft 0.8s ease-out;
  }

  .animate-image {
    animation: fadeInScale 1s ease-out;
    transition: transform 0.5s ease;
  }

  .carousel-item:hover .animate-image {
    transform: scale(1.03);
  }

  /* Keyframes */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.9);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Nav Button Styling */
  .custom-nav-btn {
    width: 5%;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .carousel:hover .custom-nav-btn {
    opacity: 1;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-size: 50%;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .display-3 {
      font-size: 2.5rem;
    }

    .carousel-item {
      min-height: auto;
    }

    .custom-nav-btn {
      display: none;
    }
  }

</style>

How to use this e-commerce carousel with button

Add it to your project in three steps

Copy the HTML from the Source code tab above and paste it inside your <div class="container"> wrapper.
Make sure the Bootstrap 5 CDN CSS and JS are linked in your <head> and before </body>. Any CodeShikhi component assumes Bootstrap 5.3+ is already loaded.
Swap the placeholder text, links, and images for your own content — the layout, spacing, and responsive behaviour stay intact.

The E-commerce Carousel with button block is fully responsive and works on every screen from 320 px phones to 1440 px+ desktops without additional CSS.

Accessibility checklist

Ship it accessible by default

Use semantic HTML landmarks — <header>, <nav>, <main>, <footer> — so screen readers can navigate your page.
Give every image an alt attribute (empty alt="" if it's decorative).
Label icon-only buttons with aria-label and keep focus outlines visible.
Maintain a contrast ratio of at least 4.5:1 for body text against its background.
Test the e-commerce carousel with button with Tab / Shift+Tab and Enter — every interactive element should be reachable.

Step-by-step customisation

Make it match your brand

Change the colour palette by overriding Bootstrap CSS variables: --bs-primary, --bs-body-bg.
Adjust spacing with utility classes such as py-5, gap-4, and mt-lg-5 — no custom CSS required.
Swap the typography by loading a Google Font in your <head> and setting --bs-body-font-family.
Replace stock images with brand assets. Keep dimensions similar to avoid layout shift.
Preview at multiple breakpoints (mobile, tablet, desktop) and tweak column spans if content wraps awkwardly.

Need the full theory? Read our Bootstrap 5 Technical Introduction Guide for grid, breakpoints, and Sass customisation in depth.

About the E-commerce Carousel with button e-commerce carousel with button

This e-commerce carousel with button is part of the free CodeShikhi (কোড শিখি) Bootstrap 5 library — a growing collection of copy-paste website building blocks curated for learners and freelance developers. Every block is written in clean, semantic HTML with Bootstrap utility classes, keeps custom CSS to the minimum needed, and works without any build step. Use it as a starting point and adapt the markup, colours, and content to fit your project's brand and audience.

If you spot a bug, want a new variation, or would like to contribute an improvement, reach us via the contact page — we ship updates weekly based on community feedback.

Detailed Technical Breakdown

Detailed Technical Breakdown: E-commerce Carousel with button

Browser compatibility & standards

The E-commerce Carousel with button e-commerce carousel with button is authored against Bootstrap 5.3, which drops legacy Internet Explorer support and targets modern evergreen engines — Chrome, Edge, Firefox, Safari, and all Chromium-based mobile browsers. Because the markup relies exclusively on the standard CSS features that ship with Bootstrap (Flexbox, CSS Grid, CSS custom properties, and the responsive breakpoint system), you can safely deploy this e-commerce carousel with button to any browser released in the last five years without polyfills. If you need to support very old WebKit or Samsung Internet builds, load the standard Bootstrap 5 CSS from the official jsDelivr CDN — the bundled autoprefixer output already covers those vendor prefixes.

Performance impact

Performance-wise this block is intentionally light. The HTML payload for a typical Bootstrap e-commerce carousel with button is under 4 KB gzipped, and it shares the same Bootstrap CSS/JS bundle you are already loading — meaning the marginal cost of adding it to a page is effectively zero KB on repeat visits. There is no JavaScript framework runtime, no hydration cost, and no client-side data fetching. The only images referenced are placeholders you will replace with your own assets; when you do, serve them as WebP or AVIF, add explicit width and height attributes to prevent layout shift (CLS), and lazy-load anything below the fold with loading="lazy". These small changes typically move Lighthouse Performance scores from the mid-80s into the 95+ range on both mobile and desktop.

Utility classes used

The e-commerce carousel with button leans on Bootstrap's utility-first classes to stay declarative: spacing utilities (p-*, m-*, gap-*), the flex helpers (d-flex, align-items-*, justify-content-*), the grid system (container, row, col-lg-*), typography helpers (display-*, lead, text-*), and colour utilities that resolve to Bootstrap CSS variables such as --bs-primary, --bs-body-bg, and --bs-border-color. Because everything is expressed as utilities you can re-theme the entire e-commerce carousel with button by overriding a handful of CSS variables at the :root level — no Sass recompile required.

Exact customisation steps

Copy the source HTML from the tab above and paste it inside your <body>. The outer <div class="container"> wrapper is already included so the e-commerce carousel with button sits on the Bootstrap grid.
Replace the placeholder headings and paragraphs with your own copy. Keep heading levels in order (h1 → h2 → h3) so screen readers and search engines can parse the document outline.
Swap any <img> tags for your brand assets. Match the original aspect ratio to avoid layout shift, and always fill in a meaningful alt attribute.
Retune the palette by overriding CSS variables::root { --bs-primary: #4f46e5; --bs-body-bg: #ffffff; }. All utility colour classes update automatically.
Test at each Bootstrap breakpoint — sm (576 px), md (768 px),lg (992 px), xl (1200 px), xxl (1400 px) — using your browser's device toolbar, and tweak column spans if long content wraps.
Ship it with the standard Bootstrap 5 CDN in the <head> and the JS bundle before the closing </body>. No build step required.

Technical & Performance Integration Guide

Technical & Performance Integration Guide — E-commerce Carousel with button (gallery)

When and why to use this gallery

An image gallery is the heaviest block you can put on a page, and also the one visitors judge fastest. The goal is a grid that stays perfectly aligned while loading progressively, so the layout never jumps as photographs arrive.

Accessibility & ARIA attributes

Give each image a descriptive alt attribute that says what the photo shows, not "image1.jpg". Purely decorative tiles take alt="". If clicking a thumbnail opens a lightbox, that dialog needs role="dialog", aria-modal="true", a focus trap and Escape-to-close — Bootstrap's modal component provides all of this when you keep its data attributes intact. Announce the gallery itself with a <section aria-label="Photo gallery"> wrapper.

Performance notes for this pattern

Always pair loading="lazy" with a fixed aspect ratio (.ratio.ratio-4x3) so lazy images reserve their space and CLS stays at zero. Serve responsive sources with srcset and sizes so phones download roughly 400 px-wide files rather than desktop originals — typically a 70–80% byte saving. Decode off the main thread with decoding="async", and keep the first row eager so the gallery paints something immediately.

Three customisation tricks

Use .object-fit-cover with a ratio wrapper for a masonry-like look without a JavaScript layout library.
Add .g-2 instead of .g-4 for a tighter, more editorial mosaic.
Preload only the first visible image with <link rel="preload" as="image">.

Mistakes to avoid

Shipping 3000 px originals to mobile.
Empty or duplicated alt text across every tile, which search engines treat as a quality signal.

More designs in this section

Portfolio Website Homepage

Portfolio Website Home Page