Building a Purple Experience
Components
Swiper Component
5 min
the current swiper component has flaws we aim for exchanging 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 paramscope selectionscope storage scope (url/user attribute) 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 in apps, the swiper requires the setting of paramscope unless this property is set, scrolling is not possible in apps