Swiper Component

the current swiper component has flaws we aim to exchange it with a new one soon the swiper component is an angular carousel/slider that supports multiple effects, pagination types, lazy loading, autoplay, and navigation it is built on swiper js configuration property type default description effect 'float' | 'slide' 'float' visual effect used for slide transitions loop boolean true whether slides should loop infinitely pagination boolean | swiperpaginationconfig true pagination configuration or boolean to enable/disable navbuttons boolean true show navigation buttons tapentry eventactionconfig action executed when a slide is tapped param string 'swiper id' url parameter name for selected slide tracking pathvalue string | conditionalvalue\<string> only used when paramscope is path expression resolved against the active slide's child component context to build the path segment see pathvalue docid\ kvprj609p4fmtg4uqayys below paramscope selectionscope url storage scope (url/user attribute/path) see selectionscope enum docid\ kvprj609p4fmtg4uqayys height swiperheight swiperheight auto height strategy for the swiper autoplay boolean | swiperautoplayconfig false autoplay configuration lazyloaddelay number 50 delay between loading slides (ms) lazyload boolean false enable lazy loading for slides centeredslides boolean true center slides or left align swiperpaginationconfig property type description type 'bullets' | 'fraction' | 'progressbar' | 'tabs' pagination indicator type content string custom content for pagination entries (used with tabs) swiperautoplayconfig property type default description delay number 3000 delay between auto advances (ms) swiperheight enum auto – automatic height based on content fill viewport – fill the available viewport height selectionscope enum defines where and how the currently selected slide is persisted so that the selection can be tracked, deep linked, or consumed by dependent components (for example, ads) url stores the selected slide's data id in a url query parameter the parameter name is defined by param and defaults to swiper id example ?swiper id=\<postid> when a url containing this parameter is opened, the swiper initializes on the slide whose id matches the parameter value user attribute stores the selected slide's data id in a user attribute the attribute name is defined by param the browser url remains unchanged path stores the value resolved from pathvalue as the last segment of the current url, creating seo friendly urls when a url containing a matching path segment is opened, the swiper initializes on the slide whose pathvalue matches that segment pathvalue when paramscope is set to path, pathvalue defines the value used to represent the active slide in the url path the value is resolved against the child component context of the active slide , allowing access to slide specific data such as a post slug example { "type" "swiper", "paramscope" "path", "pathvalue" "$context content properties slug" } runtime behavior when the user navigates between slides, the resolved pathvalue is added as the final segment of the current url on subsequent slide changes, the existing segment is replaced rather than appended, ensuring the url remains stable and does not continuously grow examples /section /section/post 1 /section/post 2 when a url is opened directly, the swiper initializes on the slide whose resolved pathvalue matches the last path segment if no matching slide is found, the swiper starts on the first slide recommended guard `pathvalue` with a condition pathvalue is resolved against the active slide's context, but the expression can unintentionally pick up the parent (swiper) component's context if it resolves to an empty or undefined value, the swiper may behave unexpectedly, for example, writing an empty path segment or rendering empty slides to prevent this, we recommend wrapping pathvalue in a condition so it is only applied when the value is actually defined example { "pathvalue" { "value" "$context content properties slug", "condition" { "value" "$context content properties slug", "operation" "set" } } }