Swiper
v6.8.4
Most Modern Mobile Touch Slider
Get Started
API
Demos
React
Svelte
Vue.js
Angular
stars
forks
Sponsors
Become a sponsor
Default
Navigation
Pagination
Pagination dynamic
Pagination progress
Pagination fraction
Pagination custom
Scrollbar
Vertical
Space between
Slides per view
Slides per view auto
Centered
Centered auto
CSS mode
Freemode
Scroll container
Slides per column
Nested
Grab cursor
Infinite loop
Infinite loop with slides per group
Slides per group skip
Effect fade
Effect cube
Effect coverflow
Effect flip
Keyboard control
Mousewheel control
Autoplay
Dynamic slides
Thumbs gallery
Thumbs gallery loop
Multiple swipers
Hash navigation
History
RTL
Parallax
Lazy load images
Responsive breakpoints
Ratio breakpoints
Autoheight
Zoom
Virtual slides
Custom plugin
Slideable menu
Change direction
Watch slides visiblity
Swiper Demos
You can download all these demos and hook into the code from GitHub
here
Default
Open in new window
Core
React
Vue
Angular
Svelte
Navigation
Open in new window
Core
React
Vue
Angular
Svelte
Pagination
Open in new window
Core
React
Vue
Angular
Svelte
Pagination dynamic
Open in new window
Core
React
Vue
Angular
Svelte
Pagination progress
Open in new window
Core
React
Vue
Angular
Svelte
Pagination fraction
Open in new window
Core
React
Vue
Angular
Svelte
Pagination custom
Open in new window
Core
React
Vue
Angular
Svelte
Scrollbar
Open in new window
Core
React
Vue
Angular
Svelte
Vertical
Open in new window
Core
React
Vue
Angular
Svelte
Space between
Open in new window
Core
React
Vue
Angular
Svelte
Slides per view
Open in new window
Core
React
Vue
Angular
Svelte
Slides per view auto
Open in new window
Core
React
Vue
Angular
Svelte
Centered
Open in new window
Core
React
Vue
Angular
Svelte
Centered auto
Open in new window
Core
React
Vue
Angular
Svelte
CSS mode
Open in new window
Core
React
Vue
Angular
Svelte
Freemode
Open in new window
Core
React
Vue
Angular
Svelte
Scroll container
Open in new window
Core
React
Vue
Angular
Svelte
Slides per column
Open in new window
Core
React
Vue
Angular
Svelte
Nested
Open in new window
Core
React
Vue
Angular
Svelte
Grab cursor
Open in new window
Core
React
Vue
Angular
Svelte
Infinite loop
Open in new window
Core
React
Vue
Angular
Svelte
Infinite loop with slides per group
Open in new window
Core
React
Vue
Angular
Svelte
Slides per group skip
Open in new window
Core
React
Vue
Angular
Svelte
Effect fade
Open in new window
Core
React
Vue
Angular
Svelte
Effect cube
Open in new window
Core
React
Vue
Angular
Svelte
Effect coverflow
Open in new window
Core
React
Vue
Angular
Svelte
Effect flip
Open in new window
Core
React
Vue
Angular
Svelte
Keyboard control
Open in new window
Core
React
Vue
Angular
Svelte
Mousewheel control
Open in new window
Core
React
Vue
Angular
Svelte
Autoplay
Open in new window
Core
React
Vue
Angular
Svelte
Dynamic slides
Open in new window
Core
React
Vue
Angular
Svelte
Thumbs gallery
Open in new window
Core
React
Vue
Angular
Svelte
Thumbs gallery loop
Open in new window
Core
React
Vue
Angular
Svelte
Multiple swipers
Open in new window
Core
React
Vue
Angular
Svelte
Hash navigation
Open in new window
Core
React
Vue
Angular
Svelte
History
Open in new window
Core
React
Vue
Angular
Svelte
RTL
Open in new window
Core
React
Vue
Angular
Svelte
Parallax
Open in new window
Core
React
Vue
Angular
Svelte
Lazy load images
Open in new window
Core
React
Vue
Angular
Svelte
Responsive breakpoints
Open in new window
Core
React
Vue
Angular
Svelte
Ratio breakpoints
Open in new window
Core
React
Vue
Angular
Svelte
Autoheight
Open in new window
Core
React
Vue
Angular
Svelte
Zoom
Open in new window
Core
React
Vue
Angular
Svelte
Virtual slides
Open in new window
Core
React
Vue
Angular
Svelte
Custom plugin
Open in new window
Core
Slideable menu
Open in new window
Core
Change direction
Open in new window
Core
Watch slides visiblity
Open in new window
Core
React
Vue
Angular
Svelte