Pure CSS Carousel Walkthrough

I have converted the testimonial carousel from a JavaScript-based implementation to a pure CSS solution using the radio button technique.

Changes Made

1. HTML Overhaul

• Added Hidden Radio Buttons: Two radio buttons (#dot-1 and #dot-2) were added to the top of the testimonial section to track the carousel state.

• Converted Dots to Labels: The navigation dots are now <label> elements linked to the radio buttons using the for attribute. This allows clicking the dots to toggle the radio buttons without any JS.

• Removed Script Tag: The dedicated <script> block for carousel logic has been completely removed.

2. SCSS Logic

• State Selection: Using CSS sibling selectors (#dot-n:checked ~ .testimonial-container), the carousel now translates its position based on which radio button is active.

• Active Dot Highlights: The active "dot" (label) is now highlighted using CSS pseudo-states (:checked), removing the need for an .active class managed by JS.

• Transitions: The existing transition: transform 0.5s ease-in-out; on the carousel container ensures smooth movement.

How it Works

TriggersCSS SelectorCSS SelectorUser clicks Label (Dot)Radio Button :checkedCarousel Translates (-100% or 0%)Label 스타일 (Active Style)

Verification

NOTE

Due to a browser environment issue, automated visual verification was not possible. However, the implementation follows standard no-JS patterns and has been logically verified.

Code Verification

• index.html: Verified radio inputs and label associations.

• _testimonial.scss: Verified translation logic and dot styling.

• main.css: The changes will be applied once SCSS is compiled.