Carousel & Affix

Prev Next

The last two JS plugins in this track. Carousel is an image/content slideshow with autoplay, indicators, and next/prev controls. Affix pins an element in place while the user scrolls past it — and it's the one plugin here that no longer exists in modern Bootstrap.

Carousel Structure: .carousel-inner and Plain .item Slides

Each slide sits inside .carousel-inner. This is the one place where Bootstrap 3's class name differs sharply from what most people remember from later versions:

Bootstrap-3-specific: Bootstrap 3 slides use a plain <div class="item"> for each slide — not .carousel-item. The .carousel-item rename happened in Bootstrap 4. Writing .carousel-item in a Bootstrap 3 page does nothing; the plugin and its CSS are both looking for .item.

<!-- TrailMap: featured trail photos carousel -->
<div id="trailPhotoCarousel" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#trailPhotoCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#trailPhotoCarousel" data-slide-to="1"></li>
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="ridge-overlook.jpg" alt="Ridge Overlook Loop">
      <div class="carousel-caption">Ridge Overlook Loop — 4.2 mi</div>
    </div>
    <div class="item">
      <img src="cedar-creek-falls.jpg" alt="Cedar Creek Falls">
      <div class="carousel-caption">Cedar Creek Falls — 2.8 mi</div>
    </div>
  </div>

  <a class="left carousel-control" href="#trailPhotoCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#trailPhotoCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

data-ride="carousel" starts autoplay as soon as the page loads; leave it off if you only want manual next/prev navigation.

Affix: Pinning an Element While Scrolling

Affix switches an element between static, fixed ("affixed"), and bottom positioning as the page scrolls, using two offsets to decide when to pin and unpin it:

Attribute	Purpose
`data-spy="affix"`	Turns on affix behavior for the element
`data-offset-top`	Pixel scroll position at which the element becomes pinned
`data-offset-bottom`	Distance from the bottom of the page at which it unpins

<!-- TrailMap: "Submit a Trail" sticky CTA sidebar box -->
<div class="well" data-spy="affix" data-offset-top="200" data-offset-bottom="300">
  <h4>Know a Great Trail?</h4>
  <p>Share it with the TrailMap community.</p>
  <a class="btn btn-success btn-block" href="#">Submit a Trail</a>
</div>

Scroll past 200px and this box locks in place in the viewport; get within 300px of the page bottom and it releases so it doesn't overlap the footer.

Affix was removed entirely in Bootstrap 4. There is no Affix plugin, no data-spy="affix", in Bootstrap 4 or 5 at all. The modern replacement needs no JavaScript whatsoever — a single CSS property does the whole job:

.submit-trail-cta { position: sticky; top: 20px; }

This position: sticky rule is not a Bootstrap 3 feature — it's plain CSS, and it's the reason the framework dropped Affix rather than carrying it forward: the browser can now do natively what used to take a scroll-listening JS plugin.

Up next: With every JS plugin covered, LESS Customization moves into reshaping Bootstrap 3's own source variables and styles.

Prev Next