Swapper
Description
Creates sequential content navigation with Previous/Next buttons and automatic height adjustment. Perfect for step-by-step processes, tutorials, or any content that needs to be viewed sequentially. Automatically handles YouTube video pausing and smooth transitions.
Usage
Wrap sequential content sections in a container with class .swapper. Each direct child becomes a "slide" that can be navigated through using the automatically generated Previous/Next buttons.
Available Options
- CSS Classes:
.swapper- Main container for sequential content
- Automatic Features:
- Previous/Next navigation buttons
- Slide counter display (e.g., "2/5")
- Automatic height adjustment
- Smooth fade transitions
- YouTube video pausing
- Scroll-to-top on navigation
- Circular navigation (Next from last goes to first)
Examples
Basic Swapper
Step 1: Introduction
This is the first step in a sequential process.
Use the Previous/Next buttons to navigate between steps.
Step 2: Main Process
This is the second step.
The swapper automatically handles the navigation and maintains consistent height.
Step 3: Conclusion
This is the final step.
The Next button will cycle back to the first step.
Swapper with Different Content Heights
Short Content
This slide has minimal content.
Long Content
This slide has much more content to demonstrate how the swapper handles different heights.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Medium Content
This slide has moderate content.
The swapper automatically adjusts the container height to accommodate the tallest slide.
Swapper with Interactive Content
Video Content
Interactive Activity
Activity
Complete this activity after watching the video.
The swapper handles transitions between different types of content.
Knowledge Check
-
What did you learn from the video?
@ The video covered important concepts.
- *Concept A
- *Concept B
- Concept C
Swapper with Mixed Content Types
Introduction
Welcome to this multi-step tutorial.
- Step-by-step instructions
- Interactive elements
- Progress tracking
Process Overview
Detailed Steps
- First, prepare your materials
- Next, follow the procedure
- Finally, verify your results
Summary
You have completed all the steps in this tutorial.
Use the Previous button to review any step.
Notes
- Each direct child of
.swapperbecomes a navigable slide - Navigation buttons are automatically generated
- Slide counter shows current position (e.g., "2/5")
- Height automatically adjusts to accommodate the tallest slide
- Smooth fade transitions between slides
- YouTube videos are automatically paused when navigating away
- Page scrolls to top of swapper when navigating
- Navigation is circular (Next from last slide goes to first)
- Works with any HTML content including interactive elements
- Perfect for tutorials, step-by-step processes, and sequential content
- Maintains consistent spacing and visual hierarchy
- Responsive design works on all screen sizes