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"]
With DataLayer Tracking
Multiple Instances
You can use multiple shortcodes on the same page, each with different slides and settings.
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.
- 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
Automatically advance through slides every N seconds. User interaction (click, swipe, keyboard) resets the timer.
// Swiper: auto-advance every 5 seconds, stop at last slide
[steves_swiper slides="1,2,3" auto_advance="5"]
// Swiper: auto-advance every 5 seconds, loop infinitely
[steves_swiper slides="1,2,3" auto_advance="5" loop="1"]
// Swiper: auto-advance with slower fade and looping
[steves_swiper slides="1,2,3" auto_advance="5" loop="1" transition_speed="0.8"]
// Hideshow: auto-advance every 8 seconds with loop
[steves_hideshow slides="1,2,3" auto_advance="8" loop="1"]
- dl_event: Event name pushed to dataLayer (default: varies by shortcode)
- dl_event_category: Event category
- dl_event_action: Event action
- dl_event_label: Event label (defaults to slide slug)
- dl_value: Numeric value for event
- dl_page_id: Page identifier for tracking
Keyboard Navigation
- Arrow Keys: Navigate between slides
- Tab: Move focus between interactive elements
- Enter/Space: Activate buttons
Screen Reader Support
- Live Regions: Announce current slide and navigation
- ARIA Labels: Descriptive labels for all controls
- Role Attributes: Proper semantic markup
Visual Accessibility
- High Contrast: Supports high contrast mode
- Focus Indicators: Visible focus outlines
- Color Independence: Navigation works without color cues
Videos in Swiper
- The area over videos are not swipeable by default. Since Swiper focuses on the touch/swipe features for analytics & data layers, here’s a few ways around that:
- Transparent Overlay: Place a transparent div over the video. This makes the entire area swipeable, but it prevents users from clicking the video controls (play/pause) directly.
- Pointer-events: none: Apply pointer-events: none to the video. This makes it swipeable but completely non-interactive (you can’t click to play, so it must auto-play).
- Custom Play Overlay (Recommended): Use a “poster image” or a custom play button overlay. The overlay is swipeable. When the user clicks the play button, the overlay is removed, and the video starts. This allows swiping before the video starts, but once it’s playing, that area becomes non-swipeable again.
- Safe Zones: Ensure there is enough padding or “empty space” around the video within the slide so the user has a clear area to grab and swipe.
