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

Github

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

Examples

Slides per view

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.

Github

First slide to show

By providing initialIndex with 2, the swiper will begin on the second slide.

Github

Centered slides

By providing alignment: 'center', the swiper will begin on the middle slide, initialIndex won't be used in this case.

Github

Autoplay

Providing {autoplay: { enabled: true, loop: true } } lets the slides advance automatically. Pass duration to control the amount of time each slide shows for.

Github

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.

Github

With custom content

By using Swiper.Next and Swiper.Prev with placement="inline", you can put the navigation buttons above or under your slides.

Github

Card Table