-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Swiper React Component
Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features.
Swiper React component represents Framework7's Swiper component.
Usage examples
Minimal layout
<Swiper>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
Renders to:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
With all controls
<Swiper pagination nextButton prevButton scrollbar>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
Renders to:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-scrollbar"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
With additional parameters
You can pass any additional Swiper API parameters using params
property:
<Swiper nextButton prevButton params={{speed:500, slidesPerView: 3, spaceBetween: 20}}>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
With manual initializatiin
In all the examples above Swiper will be initialized automatically. If you don't need it and need to init it manually then pass init: false
prop:
<Swiper init={false}>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
Properties
Prop | Type | Default | Description |
---|---|---|---|
<Swiper> properties | |||
init | boolean | true | Initializes Swiper |
params | object | Object with Swiper API parameters | |
pagination | boolean | Enables pagination | |
scrollbar | boolean | Enables scrollbar | |
nextButton | boolean | Enables next navigation button | |
prevButton | boolean | Enables previous navigation button | |
<SwiperSlide> properties | |||
zoom | boolean | Adds additional slide inner wrapping required for zoom-in functionality (should be also enabled via params on Swiper initialization) |
Access To Initialized Instance
If you use automatic initalization to init Swiper (with init:true
prop) and need to use its Methods and Properties you can access its initialized instance by accessing .swiper
component's property.