Swiper & Hideshow
A lightweight (~16kb), SEO-friendly content switching framework for WordPress that gives you total control over performance, accessibility, and tracking—without jQuery or theme conflicts.
Why is this different than other slideshows?
It’s two powerful approaches in one system:
- Use Swiper for instant panel switching when content is small and fast.
- Use Hideshow (AJAX-powered) when content is heavier and needs to load one panel at a time.
Both versions share the same custom post type, are WCAG/ADA friendly, fully SEO indexable, virtually theme-agnostic, and built for data tracking (swipes, clicks, keyboard, hotspots, campaign data layers, and more). No jQuery. No bloated dependencies. No design overrides.
Swiper
For lightweight content, Swiper switches instantly because it loads all the elements up-front.
This example shows a native WordPress gallery with the Steve’s Galley Helper enhancement, displaying in the Swiper/Hideshow container.
sample of video & content
(you know this guys shreds)
Hideshow
For extensive or media-heavy content, Hideshow loads one panel at a time with an indicator.
Stop Installing 400kb Sliders for a 16kb solution.
Most WordPress sliders and carousels are design-heavy and SEO-hostile. They override your theme, hide content from search engines, and make accessibility an afterthought. Swiper & Hideshow is different. It’s not a “pretty slider plugin” out of the box, it’s a clean & reliable foundation to start with. You decide what it looks like. You decide how it behaves.
You get:
- Two switching engines (instant-load or AJAX-load)
- One shared custom post type (Steve Slides)
- Full SEO visibility
- WCAG/ADA-friendly markup
- Data-layer-ready for interaction & analytic tracking
- No theme interference or unnecessary styling
- Zero jQuery or outside dependencies. It’s vanilla, baby!
– If your content is lightweight, Swiper switches instantly because it loads all the elements up-front.
– If your content is media-heavy, Hideshow loads one panel at a time with a visual indicator.
Swiper & Hideshow combines the functionality of Steve’s Swiper and Steve’s Hideshow into a single plugin. Create swiper carousels with editable slides or collapsible content sections with smooth animations. Perfect for FAQs, spoilers, presentations, or any content you want to hide/show or swipe through.
Features include:
- AJAX-powered content loading for dynamic slides
- Keyboard navigation with arrow keys
- Touch and mouse swipe support
- ADA and WCAG compliant accessibility
- DataLayer integration for Google Analytics
- Customizable button texts
- Shared slide management
- License activation for premium features
- Upload the plugin files to the /wp-content/plugins/swiper-hideshow directory, or install the plugin through the WordPress plugins screen directly.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
- Go to Settings > Swiper & Hideshow License to enable features and activate your license.
- Create slides via the “Steve Slides” custom post type in the admin menu.
- Use the [steves_hideshow] or [steves_swiper] shortcodes in your posts/pages.
Creating Slides
- In the WordPress admin dashboard, go to Steve Slides.
- Click Add New to create a slide.
- Use the Gutenberg editor to design your slide content.
- Configure slide settings: slug and public access.
- Save the slide and note the post ID.
Displaying Content
Use shortcodes in posts/pages:
Hideshow (AJAX loading):
[steves_hideshow slides="1,2,3" prev_button="Back" next_button="Next"]
Swiper (pre-loaded):
[steves_swiper slides="1,2,3" prev_button="Back" next_button="Next"]
Creating Slides
- In the WordPress admin dashboard, go to Steve Slides.
- Click Add New to create a slide.
- Use the Gutenberg editor to design your slide content.
- Configure slide settings: slug and public access.
- Save the slide and note the post ID.
Displaying Content
Use shortcodes in posts/pages:
Hideshow (AJAX loading):
[steves_hideshow slides="1,2,3" prev_button="Back" next_button="Next"]
Swiper (pre-loaded):
[steves_swiper slides="1,2,3" prev_button="Back" next_button="Next"]
Both shortcodes support these attributes:
- slides: Comma-separated list of slide post IDs (required)
- prev_button: Text for previous button (default: “Back”)
- next_button: Text for next button (default: “Next”)
- second_last_button: Text for second-to-last button (optional)
- auto_advance: Auto-advance interval in seconds (e.g., 5). Omit or leave empty for no auto-advance.
- auto_advance_pause_hover: Pause auto-advance on hover. Set to 0 to disable (default: 1).
- loop: When set to 1, auto-advance loops back to the first slide infinitely. Only effective with auto_advance. (default: disabled)
- transition_speed: Fade transition duration in seconds (e.g., 0.8). Accepts decimals. Defaults to 0.3.
- show_hash: Set to 0 to disable URL hash updates when slides change (default: 1). When enabled, the URL hash reflects the current slide’s slug.
- dl_event: DataLayer event name (default varies by shortcode)
- dl_event_category: DataLayer category
- dl_event_action: DataLayer action
- dl_event_label: DataLayer label
- dl_value: DataLayer value
- dl_page_id: DataLayer page ID
| Attribute | Default | Description |
|———–|———|————-|
| auto_advance | “” | Auto-advance interval in seconds (e.g., “5”). Leave empty to disable. |
| auto_advance_pause_hover | “1” | Pause auto-advance on hover. Set to “0” to disable. |
| loop | “” | Loop back to first slide after the last. Set to “1” to enable (requires auto_advance). |
| transition_speed | “” | Fade transition duration in seconds (e.g., “0.8”). Defaults to 0.3 if not set. |
| Attribute | Default (hideshow / swiper) | Description |
|———–|—————————|————-|
| dl_event | “top_10_interaction” / “top_10_interaction” | Event name pushed to dataLayer |
| dl_event_category | “Top 10 Hideshow” / “Top 10 Sswiper” | Event category |
| dl_event_action | “view” | Event action |
| dl_event_label | “” | Event label (defaults to slide slug) |
| dl_value | “” | Numeric value for the event |
| dl_page_id | “” | Page identifier for tracking |
