Carousel Benchmark

Bootstrap 5 Carousel JS (slide engine + touch/swipe + indicators + keyboard + ~50 KB infra) vs Native CSS Scroll Snap (zero JS for sliding)

Methodology: Both sections contain 10 carousels with 5 slides each (50 slides total). The benchmark creates Bootstrap Carousel instances (init cost), then advances through all 5 slides in each carousel for 100 cycles (5,000 slide operations per section). DOM mutations are counted via MutationObserver. CSS transitions are disabled during the run so we measure raw JS overhead, not animation time.

CSS Scroll Snap

Bootstrap JS

Uses bootstrap.Carousel — manages .active / .carousel-item-next / .carousel-item-start classes, reads layout for reflow, fires 2 lifecycle events per slide, handles touch/swipe via pointer events, keyboard navigation. Requires 9 JS dependency files (~50 KB).

Slide 1

Slide 2

Slide 3

Native Browser API

Uses CSS scroll-snap-type: x mandatory — browser handles snapping, touch/swipe, momentum, deceleration. Prev/next via scrollBy() (3 lines of JS) or ::scroll-button (zero JS where supported). Built-in keyboard and touch support.

Slide 1

Slide 2

Slide 3

Results

Metric	Bootstrap Carousel	Native Scroll Snap
Initialization time (10 carousels × 5 slides)	-	-
Slide time (100 cycles × 10 carousels × 5 slides)	-	-
DOM mutations (100 cycles × 10 carousels × 5 slides)	-	-
Instance memory cost (10 carousel instances)	-	-
JS code size carousel.js (14.8 KB) + swipe (3.7 KB) + base-component (2.8 KB) + event-handler (9.2 KB) + selector-engine (4.1 KB) + data (2.1 KB) + manipulator (2.3 KB) + util (9.1 KB) + config (2.5 KB)	-	-
CSS output size _carousel.scss (5.9 KB)	-	-

Bootstrap JS 10 carousels × 5 slides — `bootstrap.Carousel`

Native Browser API 10 carousels × 5 slides — CSS `scroll-snap`

Key difference: Bootstrap Carousel manages slides by toggling .active, .carousel-item-next, and .carousel-item-start classes, forcing layout reflows, dispatching pointer events for swipe detection through a custom Swipe utility, firing 2 lifecycle events per slide (slide/slid), and maintaining an internal state machine — all requiring ~50 KB of JavaScript. Native CSS Scroll Snap handles slide transitions entirely in the browser’s compositor thread: scroll-snap-type: x mandatory with scroll-snap-align: start gives you touch/swipe, momentum scrolling, snap-to-slide, and keyboard support with zero JavaScript. Prev/next buttons need only el.scrollBy({left: slideWidth}) — 1 line of JS.

Native scroll-snap carousel (Bootstrap utilities + 2 custom CSS rules)

<style>
  .scroll-snap-x {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .scroll-snap-x::-webkit-scrollbar { display: none; }
  .scroll-snap-child { scroll-snap-align: start; }
</style>

<div class="position-relative rounded">
  <div class="d-flex overflow-auto scroll-snap-x">
    <div class="w-100 flex-shrink-0 scroll-snap-child">Slide 1</div>
    <div class="w-100 flex-shrink-0 scroll-snap-child">Slide 2</div>
    <div class="w-100 flex-shrink-0 scroll-snap-child">Slide 3</div>
  </div>
  <!-- Reuse Bootstrap carousel control styles -->
  <button class="carousel-control-prev" onclick="...">...</button>
  <button class="carousel-control-next" onclick="...">...</button>
</div>