Lovelace Swipe Navigation
This is included as a feature in compact-custom-header, there is no need to install this if you already use CCH.
- Animated swiping through Lovelace views.
- Configure views to skip over.
- Set the swipe length needed.
- Option to disable a browsers default swipe actions.
- Wrap from first view to last view and vice versa.
Follow only one of these installation methods.
Add the resource in
ui-lovelace.yamlor by using the "Raw Config Editor".
resources: # increase this version number at end of URL after each update - url: /local/lovelace-swipe-navigation/swipe-navigation.js?v=1.0.0 type: js
- Refresh the page.
Installation and tracking with HACS:
In "store" search for lovelace-swipe-navigation and install.
Configure Lovelace to load the card:
resources: - url: /community_plugin/lovelace-swipe-navigation/swipe-navigation.js type: js
- Refresh the Lovelace page.
Configuration is done in the root of your lovelace configuration.
resources: - url: /local/lovelace-swipe-navigation/swipe-navigation.js?v=1.0.0 type: js swipe_nav: wrap: false animate: swipe skip_tabs: 5,6,7,8 prevent_default: true swipe_amount: 30 views:
|swipe_amount||number||15||Minimum percent of screen needed to be swiped in order to navigate.|
|skip_tabs||string||A comma seperated list of views to skip when swiping. e.g.,
|wrap||boolean||true||Wrap from first tab to last tab and vice versa.|
|prevent_default||boolean||false||Prevents the browsers default horizontal swipe actions.|
|animate||string||no animation||Swipe animations. Can be:
Big thanks to: