DTC 477: Advanced Web Design & Development

Week 7: Sliders & Animated Menus

To Do This Week:

Assignments:

You'll receive a provided HTML/CSS structure containing an image slider and an animated navigation menu. Your task is to write the JavaScript that makes the interface work — and to be able to explain every part of it.

Read (Optional!): Chapters from Eloquent JavaScript:

Upcoming Assignments

Module Notes

This week you stop thinking only as a programmer and start thinking as an interaction designer. A slider isn't just a technical puzzle — it's a small experience. Someone arrives, wants to move through a set of images, and every choice you make (how they advance, what happens at the ends, how the motion feels) shapes whether that experience is pleasant or frustrating.

Treat this as a portfolio piece. A well-made slider is one of the most common things you'll be asked to build in the field, and a beautifully considered one is a genuine showpiece for interaction design. Choose content you'd be proud to show, and design it as if a studio were reviewing it.

What is a slider, really?

Underneath the animation, every slider is the same idea: a list of items and a pointer to the current one. "Next" moves the pointer forward, "Previous" moves it back, and the interface shows whatever the pointer is on. Almost all the logic is about managing that one number — the index.

let currentIndex = 0;        // which slide are we on?
const slides = [...];        // the list of slides
// show slides[currentIndex]

Designing for the User

Before you write code, make design decisions. These are the questions a studio would ask:

Content Ideas

Pick a subject with real images and a reason to be seen in sequence. Strong choices:

Whatever you choose, gather real images first. Placeholder gray boxes make it impossible to judge the experience.

In-class Exercise:

Slider Starter (HTML + CSS provided — you write the JS)
Slider Demo (one completed example to study)

The Core Slider Logic

1. Set up state

State is just the variables that describe "where we are right now."

const slides = document.querySelectorAll(".slide");
let currentIndex = 0;

2. A function that shows the current slide

Write one function whose only job is to make the page match currentIndex. Call it whenever the index changes. This keeps your logic in one place.

function showSlide(index) {
  // hide every slide
  slides.forEach(function (slide) {
    slide.classList.remove("active");
  });
  // show only the current one
  slides[index].classList.add("active");
}

3. Next and Previous change the index

function nextSlide() {
  currentIndex = currentIndex + 1;
  // loop back to the start if we went past the end
  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }
  showSlide(currentIndex);
}

function prevSlide() {
  currentIndex = currentIndex - 1;
  // loop to the end if we went before the start
  if (currentIndex < 0) {
    currentIndex = slides.length - 1;
  }
  showSlide(currentIndex);
}

Looping vs stopping: the if checks above create a carousel that wraps around. To stop at the ends instead, remove the wrap and disable the button when the index reaches 0 or the last slide.

4. Wire the buttons

document.getElementById("nextBtn")
  .addEventListener("click", nextSlide);

document.getElementById("prevBtn")
  .addEventListener("click", prevSlide);

5. (Optional) keyboard, dots, and a counter

// arrow-key navigation
document.addEventListener("keydown", function (e) {
  if (e.key === "ArrowRight") nextSlide();
  if (e.key === "ArrowLeft")  prevSlide();
});

The Animated Menu

The menu reuses everything from Week 6: a click listener that toggles a class, and a CSS transition that animates the result. The JavaScript stays simple; the CSS carries the motion.

const menuBtn = document.getElementById("menuBtn");
const menu = document.getElementById("menu");

menuBtn.addEventListener("click", function () {
  menu.classList.toggle("open");
});
/* CSS does the animation */
#menu { transform: translateX(-100%); transition: transform 0.35s ease; }
#menu.open { transform: translateX(0); }

Slider/Menu Site: 5% DUE: 10/7 

You will receive a provided HTML and CSS structure containing an image slider and animated navigation menu. Your task is to write the JavaScript that makes the interface work.

This is primarily a logic and problem-solving project. You should be able to explain how each event, function, variable, and state change contributes to the slider and menu behavior. Think as an interaction designer: this is a showpiece for your portfolio.

Minimum Requirements

Logic Steps (required)

At the top of your <script>, before any code, write your numbered logic steps as a commented list. For example:

/*
  1. Select all the slides and store the current index (start at 0).
  2. Write showSlide(index): hide all slides, show the one at index.
  3. nextSlide(): add 1 to the index; if past the end, loop to 0; showSlide.
  4. prevSlide(): subtract 1; if below 0, loop to the last; showSlide.
  5. Add click listeners on the next and prev buttons.
  6. Toggle the menu open/closed on the menu button click.
*/

Workshop rhythm this week

Reference Links