Slider
Description
Creates an image/content carousel with navigation controls, fullscreen mode, and caption toggling. Perfect for showcasing multiple images or content sections in a slideshow format.
Usage
Wrap content in a container with class .slider. Each slide should be a figure.img element containing an image, optional heading (h2), and optional figcaption.
Available Options
- CSS Classes:
.slider- Main container.img- Required class for each slide figure
- Features:
- Previous/Next navigation buttons
- Slide counter (e.g., "1 of 5")
- Caption show/hide toggle
- Fullscreen mode
- Responsive height adjustment
Examples
Basic Image Slider
Damaged Log
Lumber Yard
The purpose of a log yard is to store logs delivered to a Sawmill until they are processed.
The cost of logs represents 60-70% of the lumber production.
Mill Machine
Equipment Calibration
Equipment calibration is part of regular maintenance.
- Perform periodic maintenance and calibration of scanners
- Perform regular computer hardware maintenance
- Ensure optimization software is working as expected
Slider with Images Only (No Captions)
Slider with Mixed Content
Introduction
Process Overview
This slide shows the complete process overview.
Notice how captions can contain multiple paragraphs and lists.
Quality Control
Key Points
- Regular inspection required
- Document all findings
- Maintain quality standards
Notes
- Each slide must be wrapped in
<figure class="img"> - Images are automatically positioned and sized
- Headings (h2) appear as overlays on images
- Captions can contain any HTML content (paragraphs, lists, etc.)
- The slider automatically adjusts height based on content
- Fullscreen mode provides a larger viewing experience
- Navigation buttons are disabled during transitions to prevent rapid clicking
- The slider is responsive and adjusts to window size changes
- If no captions are present, the caption toggle button is hidden