Iām excited to share Simple Swipe Card, a new custom card I developed. This card lets you add multiple cards in a container and swipe between them - perfect for saving dashboard space!
Why I Made This Card
I previously used swipe-card, but kept running into the infamous āt.setconfig is not a functionā error. It was frustrating enough that I decided to build my own swipe card from scratch.
My version doesnāt use the Swiper library and has fewer bells and whistles, but itās reliable and does exactly what I need it to.
Features
Swipe between multiple cards
Pagination dots for visual reference
Configurable card spacing
Full visual editor support
Mobile-friendly touch and mouse navigation
Configuration Example
You can configure the card using the visual editor or with YAML:
The card also includes a visual editor with a card picker for easy configuration from the dashboard without the need to edit any yaml. Please see the Github repository for a screenshot.
Installation & More Information
All installation instructions, configuration details, and customization options are in the GitHub repository:
Cards can now cycle automatically at a user-defined interval (in milliseconds, minimum 500ms)
Auto-swipe intelligently pauses during manual user interaction (e.g., manual swipe, pagination click) and resumes after 5 seconds
Integrates with Loopback Mode: When enable_loopback is active, auto-swipe continuously cycles forward through the cards
Implements āPing-Pongā Mode: If loopback is disabled, auto-swipe will reverse direction upon reaching the first or last card
All auto-swipe settings are fully configurable through new options in the visual editor
Improvements
Core Logic: Enhanced robustness in internal card data handling and layout calculations, particularly concerning the total number of configured cards for greater stability.
State Synchronization: Sync card position with Home Assistant input_select or input_number entities for external control. This allows you to control which card is displayed from automations, scripts, or other dashboard elements. For example, create an input_select with options āLiving Roomā, āKitchenā, āBedroomā to automatically switch between camera feeds, or use an automation to show weather cards during the day and security cards at night.
Improvements
Complete Code Refactor: Rebuilt with modular architecture for better maintainability and performance
Optimized Card Loading: All visible cards now load upfront for smoother animations and better performance
Bug Fixes
Initial Display Animation: Fixed swipe animation not working properly on first load when more than three cards are present (closes #15 )
State Sync is so awesome! Iām now able to auto-swipe to the room Iām in using my bluetooth tracker. Also created buttons to jump-swipe straight to a room. Really loving this. Thx!
Advanced Pagination Customization: Introduced 20 more CSS variables for pagination dot styling, including support for borders, shadows, hover effects, and custom shapes. Eight detailed examples are provided in the README to inspire your custom designs.
Enhanced Loop Modes: Replaced the simple enable_loopback boolean with a comprehensive loop_mode system offering three distinct behaviors:
none: Stop at first/last card (no looping)
loopback: Jump back to first/last card when reaching edges
infinite: Continuous seamless loop navigation for uninterrupted browsing
Responsive Carousel Configuration: Introduced card_min_width option for carousel mode that automatically adjusts the number of visible cards based on screen size. Set a minimum card width (e.g., card_min_width: 220) and the carousel automatically adjusts to prevent content cutoff on smaller screens while optimizing card display for available space. This replaces the cards_visible option, which continues to work for backwards compatibility. (closes #23) (closes #5 )
Carousel mode:
Single mode:
Improvements
Smart Configuration Migration: Users with existing cards_visible configurations see a helpful status indicator in the visual editor. When they adjust the new card_min_width setting, the configuration automatically migrates to the responsive approach while preserving their preferences.
Offline Compatibility: Completely rewrote the dependency system to use Home Assistantās built-in dependencies, eliminating the need for external CDN resources. The card now works entirely offline and loads faster by leveraging HAās internal LitElement libraries instead of downloading from external sources or use them as a fallback.
Bug Fixes
Pagination Dot Alignment: Fixed pagination dots alignment issues when using card_mod custom CSS variables with larger dot sizes. Dots and its container now maintain proper positioning regardless of custom sizing.
Auto-swipe Overshoot Fix: Resolved issue where auto-swipe would overshoot and show partial content of the next card instead of properly centering on the target card. Now calculates card dimensions accurately at each swipe transition (closes #24)
Swipe Navigation: Fixed intermittent swipe navigation failures on desktop/PC browsers where swipe gestures wouldnāt complete successfully. Enhanced click prevention system now properly distinguishes between intentional swipes and browser navigation attempts (closes #25)
Really like your work most specially the State Synchronization!! One thing that I noticed is that swipe seem to get stuck (swipe gesture seemed to stop working) when i have an iframe with an embedded youtube video in it. i have to tap on the navigation page to get to other cards which is a hassle. also tried to put the iframe inside a vertical-stack card but no dice. sample code below.
Thanks for the feedback. Unfortunately iframe cards are really problematic when it comes to swipe gestures as the iframe content captures all mouse/touch events, especially the Youtube videos, which prevents the swipe detection from working properly.
Iāve tried several approaches to work around this issue, but none have been working reliably so farā¦ Iāll keep looking for a proper solution, but for now Iām not able to fix it. The only alternative now is to use the pagination dots for navigation from the iframe card to another card. Hopefully Iām able to fix if in a future release.
Awesome card, just what Iāve been looking for! Is there any way to define the āstartā card? Say I have 5 cards but I want to default to card 3 as the one that displayed by default or when the dashboard loads?
You can easily change the order of the cards in the visual editor. Or you can link a state synchronization entity to the card and default that entity to card #3. When the dashboard refreshes it will jump to card #3, but when you manually interact with the Simple Swipe card it will also change the linked state sync entityā¦
Hi. When using state sync Iāve noticed that when changing between pages you get the scroll animation each time because itās jumping back to a specific card. Is there some way of not having this initial animation? It just immediately being on the correct card from the start?
Thanks for the reply! Iām still learning at the whole YAML thing, would I include the state sync entity at the start of the card code? Something like:
I just released v2.5.3 in which I fixed this issue.
## Simple Swipe Card v2.5.3
### Improvements š ļø
- **State Synchronization Positioning:** When a state synchronization entity is linked, the card will no longer 'jump' to the set card position. This was unwanted behavior. When refreshing or returning to the dashboard, the card will just load at the correct position instead of jumping or showing an animation.
@DGTron , just like that. But you still need to create your own input_number.* or 'input_select.*` entity if you want to use this feature.
If youāre having trouble with yaml, you can check the readme for example configurations or use the visual editor to configure you card.
Thatās marvelous thanks for all your efforts on this. I was looking for an alternative to swipe card that has become more unreliable with new HA versions. Iām configuring it now - I use a few conditional cards in the swipe area so will be interesting to see how it copes
One initial question on this. I donāt think you currently support cross fading as the animation between cards. Is this possible to implement in a future release? I use a cross fade as itās less jarring in my dashboards. I find an auto swipe useful to cycle between info displays in limited space but a cross fade is gentler - if that makes sense?
Iām interested in adding different transition modes in a future release, but this would require substantial changes to the core animation system and may take some time to implement properly.
Yes understand that. Even if you could do a simple jump cut between cards, (if that makes sense?) would be nice if you could do it in the future. In the meantime Iāll just use the auto swiping function. Thanks.
