48 lines
1.9 KiB
JavaScript
48 lines
1.9 KiB
JavaScript
import { Swiper, SwiperSlide } from 'swiper/react'
|
|
import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap'
|
|
import { Play, DollarSign, HelpCircle, FileText, Archive } from 'react-feather'
|
|
|
|
const SwiperCenterSlidesStyle = ({ isRtl }) => {
|
|
const params = {
|
|
className: 'swiper-centered-slides-2 p-1',
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 30,
|
|
centeredSlides: true,
|
|
slideToClickedSlide: true
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle tag='h4'>Centered Slides option-2</CardTitle>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<Swiper dir={isRtl ? 'rtl' : 'ltr'} {...params}>
|
|
<SwiperSlide className='rounded swiper-shadow py-1 px-3 d-flex align-items-center'>
|
|
<Play size={18} />
|
|
<span className='swiper-text align-middle ml-50'>Getting Started</span>
|
|
</SwiperSlide>
|
|
<SwiperSlide className='rounded swiper-shadow py-1 px-3 d-flex align-items-center'>
|
|
<DollarSign size={18} />
|
|
<span className='swiper-text align-middle ml-50'>Pricing & Plans</span>
|
|
</SwiperSlide>
|
|
<SwiperSlide className='rounded swiper-shadow py-1 px-3 d-flex align-items-center'>
|
|
<HelpCircle size={18} />
|
|
<span className='swiper-text align-middle ml-50'>Sales Questions</span>
|
|
</SwiperSlide>
|
|
<SwiperSlide className='rounded swiper-shadow py-1 px-3 d-flex align-items-center'>
|
|
<FileText size={18} />
|
|
<span className='swiper-text align-middle ml-50'>User Guides</span>
|
|
</SwiperSlide>
|
|
<SwiperSlide className='rounded swiper-shadow py-1 px-3 d-flex align-items-center'>
|
|
<Archive size={18} />
|
|
<span className='swiper-text align-middle ml-50'>General Guides</span>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</CardBody>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default SwiperCenterSlidesStyle
|