WUI 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@welcome-ui/swiper
OverviewProps
import * as React from 'react'
import { Swiper, useSwiper } from '@welcome-ui/swiper'


const Example = () => {
  const swiper = useSwiper({ spaceBetween: 0 })


  return (
    <Swiper h="400" 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={{ maxWidth: '100%', maxHeight: '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={{ maxWidth: '100%', maxHeight: '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={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
      />
    </Swiper>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/swiper
2

Import component:

import { Swiper, useSwiper } from '@welcome-ui/swiper'

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.

First slide to show

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

Centered slides

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

Autoplay

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

With pagination

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

Without navigation

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.

With dark UI

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

CardTable