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.
import { Swiper, useSwiper } from 'welcome-ui/Swiper'
const Example = () => {
const swiper = useSwiper({ slides: { gap: 0 } })
return (
<Swiper className="h-400" store={swiper}>
<Swiper.Slides>
<img
src="https://images.unsplash.com/photo-1564460549828-f0219a31bf90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
/>
<img
src="https://images.unsplash.com/photo-1575489272413-cb506258027e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
/>
<img
src="https://images.unsplash.com/photo-1541959833400-049d37f98ccd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
/>
</Swiper.Slides>
<Swiper.PrevButton />
<Swiper.NextButton />
</Swiper>
)
}
export default Example
Providing perView with {slides: { perView { mobile: 1, tablet: 1, desktop: 2 } } } will show 1 slide per view on mobile and tablet and 2 slides per view on desktop.
By providing initialIndex with 2, the swiper will begin on the second slide.
By providing alignment: 'center', the swiper will begin on the middle slide, initialIndex won't be used in this case.
Providing {autoplay: { enabled: true, loop: true } } lets the slides advance automatically. Pass duration to control the amount of time each slide shows for.
By providing the optional navigation with { mobile: false, desktop: true }, you can hide the navigation arrows on mobile or tablet and desktop, you still can scroll between slides.
By using Swiper.Next and Swiper.Prev with placement="inline", you can put the navigation buttons above or under your slides.
When using placement="inline", you can place controls after Swiper.Slides to keep buttons under your slides.
By using useSwiper hook, you can control the swiper slides. currentSlide give you the current slide index (starting at zero) and setCurrentSlide let you set the current slide programmatically.