Web Developer Path · lesson 18 of 18

Carousels and scrollspy

Write the markup for a slideshow and for a menu that follows your reading position.

What you will learn

the carousel structure: .carousel, .carousel-inner, .carousel-item, .active
indicators and captions
scrollspy: data-spy="scroll" and data-target

Understand the idea

A carousel is a slideshow. The outer element has the class .carousel and a unique id. Inside it a .carousel-inner holds the slides, each one a .carousel-item. Exactly one slide carries the extra class .active: that is the slide shown first, and without it nothing shows. A slide holds an image or any content, with an optional .carousel-caption on top. In the preview the first slide is shown; moving between slides needs the framework's JavaScript on a live site.

Indicators are the little dashes below the slideshow. They are a list with the class .carousel-indicators, one <li> per slide. Each <li> points back to the carousel with data-target="#id" and its position with data-slide-to="0", 1, 2, and the first one is also .active. Previous and next arrows are links with the classes .carousel-control-prev and .carousel-control-next.

Scrollspy keeps a navigation menu in step with scrolling. On a long page you set data-spy="scroll" and data-target="#mynav" on the <body> (or on a scrolling box), where #mynav is the id of the navigation. As the visitor scrolls past each section, the matching link in the menu gets the class .active, so they always see where they are. Each link's href must be the id of its section.

The preview has a small built-in version of the framework with the same class names, and its screen-width steps are shrunk to fit the narrow preview (the real ones are 576, 768, 992 and 1200 pixels).

Example

A three-slide carousel

<div id="slides" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#slides" data-slide-to="0" class="active"></li>
    <li data-target="#slides" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="bg-primary text-white p-5">First slide</div>
      <div class="carousel-caption">Welcome</div>
    </div>
    <div class="carousel-item">
      <div class="bg-success text-white p-5">Second slide</div>
    </div>
  </div>
</div>

Only the item with active is visible at first. Slides here are coloured boxes, but they could be images.

Your turn: code to type and practise

Build a carousel with the id slides: an indicators list with three li items, a carousel-inner with three carousel-item slides (only the first is active), and a carousel-caption in the first slide. Then write <body data-spy="scroll" data-target="#mynav"> as the start of a page with a nav whose id is mynav.

Stretch challenge

Add previous and next controls with carousel-control-prev and carousel-control-next.

← Navbars and cards

HTML

Keep going in Web Developer Path

Responsive design and the 12-column grid

Inside a `div` with class `container`, build a `div` with class `row` that holds three `div` columns with class `col-md-4`, each containing an `h3` heading and a paragraph.

Start →14

Typography classes

Write an `h1` with the class `display-4`, a paragraph with the class `lead`, and a paragraph that uses `text-center`, `text-muted` and `text-uppercase` (the same element can carry several classes).

Start →15

Containers and spacing utilities

Make a `container-fluid` with the classes `bg-light` and `p-4`, and inside it a heading with `mb-3` and a paragraph with `mb-0`. Then add a second `div` with the classes `container` and `mt-3` that holds a box with the class `mx-auto`.

Start →16

Colours, badges, alerts, buttons and borders

Build a `div` with the classes `alert` and `alert-success`, two `span` badges with the class `badge`, a `button` with `btn` and `btn-primary`, a `btn-group` holding three `btn` buttons, and a `div` that has both `border` and `rounded`.

Start →17

Navbars and cards

Build a `nav` with the classes `navbar` and `bg-dark`, a `navbar-brand` link and a `navbar-nav` list with at least two `nav-link` links. Then build a `card` containing a `card-body` with a `card-title`, a `card-text` and a link styled as a `btn`.

Start →

Practise the idea

🚀 Play Orbit Slingshot

Launch a probe through real gravity. Curve around planets, moons and black holes to reach the portal.

Play now

FAQ

Carousels and scrollspy: common questions

Why must one carousel item have the active class?

The active class marks the slide that is shown. Without it no slide is visible.

What does scrollspy do?

It highlights the navigation link of the section the visitor is currently reading, so the menu follows their scrolling.

Do I need JavaScript for a carousel?

Yes, on a live site the framework's JavaScript moves between slides. The HTML structure is what you write and what this lesson checks.

I am stuck. What can I do?

Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.

Does my work get saved?

Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.

Start a conversation

Enjoying coding? Meet a teacher.

Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.

Tell us the learner’s age or grade and goals
We’ll suggest a suitable class or learning path
We’ll confirm format, timing and fees with a parent or guardian

Play it, don't just read it

Write some code right now

Free games that need no sign-up. Pick one and play for five minutes.

All free games →

Pick a game

Today's maths challengeFive questions · the same for everyone today · keep your streak goingPlay