Welcome UI logo

Swiper

The Swiper component is an interactive UI element that allows users to navigate through a series of content panels or images by swiping left or right. It provides a smooth and responsive experience for browsing content, making it ideal for image galleries, slideshows, and mobile interfaces. This component enhances user engagement by enabling intuitive and fluid navigation.

Source
OverviewProps

useSwiper

autoplay

Boolean

centeredSlides

Boolean

If true the swiper will begin at the middle

duration

number

firstSlideToShow

number

Won't be used if centeredSlides is true

fullWidth

Boolean

id

string

loop

Boolean

navigationSize

"lg" | "md" | "sm" | "xs"

Size of left and right navigation arrows

slidesPerView

{ desktop: number; mobile: number; tablet: number; }

Number of slides to show per view

spaceBetween

number

Space between each slides

withDarkUI

Boolean

Use black colors for the pagination and arrows in case of slides too bright

withNavigation

{ desktop: boolean; mobile: boolean; }

Show left and rigth navigation arrows on mobile/tablet or/and desktop

withPagination

{ desktop: boolean; mobile: boolean; }

Show bottom pagination on mobile/tablet or/and desktop

Swiper

store
Required

{ autoplay: boolean; centeredSlides: boolean; currentPage: number; currentSlidesPerView: number; duration: number; firstSlideToShow: number; fullWidth: boolean; id: string; navigationSize: "lg" | ... 2 more ... | "xs"; ... 11 more ...; withPagination: { ...; }; }

CardTable