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({ spaceBetween: 0 })

  return (
    <Swiper className="h-[400px]" store={swiper}>
      <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>
  )
}

export default Example

Examples

Slides per view

Providing slidesPerView with { 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 firstSlideToShow with 2, the swiper will begin on the second slide.

Github

Centered slides

By providing centeredSlides, the swiper will begin on the middle slide, firstSlideToShow won't be used in this case.

Github

Autoplay

Providing autoplay lets the slides advance automatically. Pass duration to control the amount of time each slide shows for.

Github

With pagination

By providing the optional withPagination with { mobile: true, desktop: true }, you can activate the pagination on mobile/tablet and on desktop.

Github

By providing the optional withNavigation with { mobile: false, desktop: false }, you can hide the navigation arrows on mobile/tablet and desktop, you still can scroll between slides.

Github

With dark UI

Use dark (black) colors for the pagination and arrows in case of slides too bright with withDarkUI props.

Github

Card Table