Demos


Synchronize multiple objects

For different responsive breakpoints (screen sizes) and custom buttons.


Slide One 1
Slide One 2
Slide One 3
Slide One 4
Slide One 5
Slide One 6
Slide One 7
Slide One 8
Slide One 9
Slide One 10
Slide Two 1
Slide Two 2
Slide Two 3
Slide Two 4
Slide Two 5
Slide Two 6
Slide Two 7
Slide Two 8
Slide Two 9
Slide Two 10

Parallax Effect

Custom slides transform effect and custom buttons..


Slide Three 1
Slide Three 2
Slide Three 3

Scale Effect without left/right swipe

Custom slides transform effect and custom buttons..


Slide Three 1
Slide Three 2
Slide Three 3

Centered Slides

Allow this option if you want to have your active slide in the center, instead of snapped to the left side of Swiper view.


Slide One 1
Slide One 2
Slide One 3
Slide One 4
Slide One 5
Slide One 6
Slide One 7
Slide One 8

Display half on both sides

Set up CSS to achieve only half of the entries on both sides.


Slide One 1
Slide One 2
Slide One 3
Slide One 4
Slide One 5
Slide One 6
Slide One 7
Slide One 8

Custom Progress Bar

Demonstrate how to add a slide progress bar to Swiper.


Slide One 1
Slide One 2
Slide One 3
Slide One 4
Slide One 5
Slide One 6
Slide One 7
Slide One 8

Gallery with center thumbs automatically

Using the Swiper API that enables you to add custom thumbnails and link them to your Swiper instance automatically.


null
null
null
null
null
null
null
null
null
null
null
null

Gallery with manual triggers

Customize the thumbnail/trigger and link it to your Swiper instance manually.


null
null
null
null
null
null
null
null
null
null
null
null

API


Swiper

import Swiper from '@uixkit.react/components/Swiper/index.tsx';
PropertyTypeDefaultDescription
----
This is a Migrating Component. There are not any properties and are used to quickly migrate some completed HTML code. You only need to directly modify the component source code.