JavaScript-less carousel

Learn to implement a functional and reusable carousel without JavaScript.

Goal

We’re going to create a fairly basic carousel using only CSS.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the javascript-less-carousel repository.

Fork & clone the “javascript-less-carousel” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Set up project

After forking & cloning the repository we have a few starter files, but not everything we need…

  1. javascript-less-carousel
  2. index.html
  3. css
  4. main.css
  5. modules.css
  6. type.css
  7. images
  1. Make an index.html & add the boilerplate code.
  2. Make a modules.css in your css folder—get a new version from Modulifier. Make sure to press “Select All”.
  3. Make a type.css in your css folder—get a new version from Typografier.
  4. Make a main.css in your css folder—it can remain empty.

  1. Naming conventions

    Don’t forget to follow the naming conventions.

  2. HTML snippets

    Create the boilerplate with html5, viewport, css

2 Create the HTML images

Let’s start the HTML by adding a bunch of wrapper <div> tags and the HTML necessary to display the four images.

Here’s the names of the images for quick copying-and-pasting:

arsinoitherium
elasmotherium
glyptodon
megatherium

All the different wrapper tags are needed for grouping the controls and making sure the correct relative containers are used.

⋮
</head>
<body>

  <section class="max-length">

    <div class="carousel">

      <div class="carousel-inner relative">
        <div class="carousel-items">
          <div class="carousel-item embed embed-golden" id="arsinoitherium">
            <img class="embed-item" src="images/arsinoitherium.jpg" alt="">
          </div>

          <div class="carousel-item embed embed-golden" id="elasmotherium">
            <img class="embed-item" src="images/elasmotherium.jpg" alt="">
          </div>

          <div class="carousel-item embed embed-golden" id="glyptodon">
            <img class="embed-item" src="images/glyptodon.jpg" alt="">
          </div>

          <div class="carousel-item embed embed-golden" id="megatherium">
            <img class="embed-item" src="images/megatherium.jpg" alt="">
          </div>
        </div>

      </div>

    </div>

  </section>
⋮

Have a quick refresh in the browser and you should see this (though the images will be much bigger):

3 Add the controls

Next up we’re going to add all the controls. We’re going to use radio buttons in a hacky way: instead of representing collected information they’ll represent the state of our application, aka which slide is currently visible.

This is definitely not the most accessible approach to using radio buttons, but it’s a fairly common pattern and is good for getting a quick demo going.

⋮
</head>
<body>

  <section class="max-length">

    <div class="carousel">
      <input class="carousel-input" type="radio" name="mammals" id="arsinoitherium-control">
      <input class="carousel-input" type="radio" name="mammals" id="elasmotherium-control">
      <input class="carousel-input" type="radio" name="mammals" id="glyptodon-control">
      <input class="carousel-input" type="radio" name="mammals" id="megatherium-control">

      <div class="carousel-inner relative">
        <div class="carousel-items">
          <div class="carousel-item embed embed-golden" id="arsinoitherium">
            <img class="embed-item" src="images/arsinoitherium.jpg" alt="">
          </div>

          <div class="carousel-item embed embed-golden" id="elasmotherium">
            <img class="embed-item" src="images/elasmotherium.jpg" alt="">
          </div>

          <div class="carousel-item embed embed-golden" id="glyptodon">
            <img class="embed-item" src="images/glyptodon.jpg" alt="">
          </div>

          <div class="carousel-item embed embed-golden" id="megatherium">
            <img class="embed-item" src="images/megatherium.jpg" alt="">
          </div>
        </div>

        <ul class="carousel-controls">
          <li>
            <label class="carousel-btn" for="arsinoitherium-control">Arsinoitherium</label>
          </li>
          <li>
            <label class="carousel-btn" for="elasmotherium-control">Elasmotherium</label>
          </li>
          <li>
            <label class="carousel-btn" for="glyptodon-control">Glyptodon</label>
          </li>
          <li>
            <label class="carousel-btn" for="megatherium-control">Megatherium</label>
          </li>
        </ul>
      </div>

    </div>

  </section>
⋮

  1. Lines H–K

    These are the radio buttons here. They’ll actually be hidden but whichever one is currently checked will denote which slide is currently visible.

  2. Lines AF–AS

    This list and <label> tags will represent the little buttons at the bottom of the carousel for us to hide/show.

4 Style the images

To get the images styled we need only a little bit of CSS!

.carousel-items > div {
  display: none;
}

If you now refresh in your browser you’ll see nothing… just the names of the four mammals from the <label> tags.

5 Make it functional

The next thing I think we should do is add the CSS necessary to make the carousel functional.

This requires some complex CSS selectors. We need to select each radio button that’s checked, then go into the <div> beside and select the correct slide.

⋮
#arsinoitherium-control:checked ~ .carousel-inner #arsinoitherium,
#elasmotherium-control:checked ~ .carousel-inner #elasmotherium,
#glyptodon-control:checked ~ .carousel-inner #glyptodon,
#megatherium-control:checked ~ .carousel-inner #megatherium {
  display: block;
}

If you ever want to add another slide to your carousel you have to come into the CSS and add the appropriate new selectors.

Another benefit of using JavaScript is that the JS code would help maintain all this complex CSS.

Now, we’d like to make the first slide visible on the page. That requires a simple tweak to our HTML.

⋮
<section class="max-length">

  <div class="carousel">
    <input class="carousel-input" type="radio" name="mammals" id="arsinoitherium-control" checked>
    <input class="carousel-input" type="radio" name="mammals" id="elasmotherium-control">
    <input class="carousel-input" type="radio" name="mammals" id="glyptodon-control">
    <input class="carousel-input" type="radio" name="mammals" id="megatherium-control">

    <div class="carousel-inner relative">
      <div class="carousel-items">
⋮

Refresh this in the browser and we should see a single slide:

But not only that—it should fully work! Click on the different slide names at the bottom and see that the carousel changes.

  1. index.html — Line E

    By adding the checked attribute to this radio button the associated image should now be visible because of those complex CSS selectors we wrote.

6 Style the controls

The last thing we have to do is make the controls look nice. That’ll require a little HTML & CSS.

⋮
<ul class="carousel-controls list-group-inline pin-cb w-1 text-center push-0 island-1-2">
  <li>
    <label class="carousel-btn icon i-18 ir" for="arsinoitherium-control">Arsinoitherium</label>
  </li>
  <li>
    <label class="carousel-btn icon i-18 ir" for="elasmotherium-control">Elasmotherium</label>
  </li>
  <li>
    <label class="carousel-btn icon i-18 ir" for="glyptodon-control">Glyptodon</label>
  </li>
  <li>
    <label class="carousel-btn icon i-18 ir" for="megatherium-control">Megatherium</label>
  </li>
</ul>
⋮

Now for a little bit of CSS to make them look like circles.

We’re also going to add some CSS that will highlight the current button. Using complex CSS selectors, like we used for showing the right slide, we’ll color the correct button.

⋮
.carousel-btn {
  border: 4px solid #fff;
  border-radius: 50%;
}

#arsinoitherium-control:checked ~ .carousel-inner [for="arsinoitherium-control"],
#elasmotherium-control:checked ~ .carousel-inner [for="elasmotherium-control"],
#glyptodon-control:checked ~ .carousel-inner [for="glyptodon-control"],
#megatherium-control:checked ~ .carousel-inner [for="megatherium-control"] {
  background-color: #fff;
}

And that’s it! A fully functional carousel using only CSS.

  1. index.html — Line B

    Add the following new classes:

    • .list-group-inline
    • .pin-cb
    • .w-1
    • .text-center
    • .push-0
    • .island-1-2

  2. index.html — Line D

    Add the following new classes:

    • .icon
    • .i-18
    • .ir

  3. css/main.css — Lines B–E

    This CSS will make the buttons be circles that aren’t filled.

  4. css/main.css — Lines G–L

    This CSS will make the currently visible slide shown in it’s associated button by making the background-color white.

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.