Gathering detailed insights and metrics for swiper-cum-carousel
Powerful swiper/carousel wrapper for React Native components.
Installations
npm install swiper-cum-carouselDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
21.6.1
NPM Version
10.2.4
Score
72.6
Supply Chain
98.9
Quality
76.8
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
TypeScript
TypeScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
MhtChawla
Download Statistics
Total Downloads
2,036
Last Day
1
Last Week
3
Last Month
29
Last Year
292
GitHub Statistics
123 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Oct 06, 2024
Maintainers
1
Package Meta Information
Latest Version
1.0.13
Package Id
swiper-cum-carousel@1.0.13
Unpacked Size
26.34 kB
Size
5.94 kB
File Count
6
NPM Version
10.2.4
Node Version
21.6.1
Published on
Oct 06, 2024
Total Downloads
Cumulative downloads
Total Downloads
2,036
Last Day
0%
1
Compared to previous day
Last Week
-40%
3
Compared to previous week
Last Month
52.6%
29
Compared to previous month
Last Year
-4.9%
292
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
1
React Native Swiper & Carousel
(swiper-cum-carousel) - ts support added
Flexible, lightweight and fully customizable Swiper as well as Carousel wrapper for your React Native app components, images or cards.
Important
Basically, <SwiperCumCarousel> for React Native is a wrapper to wrap around your components/children & convert it into a slider / slideshow/ swiper, (e.g. best for onboarding screens).
It can also be used as Carousel displaying multiple components in single view at a time, (e.g. product cards of flipkart/ecommerce).
Thus, 2 in 1 premade swiper-cum-carousel for ease of any swipe in React Native. (examples below)
Installation
-
npm i swiper-cum-carousel
or
yarn add swiper-cum-carousel -
cd ios && pod install
Use
1import SwiperCumCarousel from 'swiper-cum-carousel'
1<SwiperCumCarousel> 2..two or more children 3</SwiperCumCarousel>
Props
(items prop to make carousel active)
| Name | Description |
| w | width of the wrapper (give width here {200},{300} etc) |
| renderTitle | renders a title to the wrapper's top (give name in '..') |
| titleStyle | gives style to title |
| autoPlay | autoplays the swiper as slideshow |
| autoPlayDuration | duration of autoplay (givr timing here 2000,3000 etc) |
| style | styling for the wrapper |
| loop | infitive slideshows, works upon button click or autoplay on but doesn't work on manual finger swiper |
| pagingEnabled | default it is true, but we can set false |
| showsScrollBar | shows a scrollbar at bottom of wrapper |
| showsIndex | shows index (which slide no.) is currently visible to user |
| indexStyle | gives styling to index |
| showsPagination | render pagination at bottom of wrapper (dots) |
| pagingNavigation | navigate to the slide through clicking on pagination dots |
| showsButtons | render buttons |
| buttonLeftText | give your button title (or component) to change left button label |
| buttonGroupStyle | gives styling to group of buttons (collectively) |
| buttonStyle | gives styling to every button |
| buttonRightText | give your button title (or component) to change right button label |
| buttonLeftStyle | gives styling to left button |
| buttonRightStyle | gives styling to right button |
| renderNextButtonOnly | renders only Next button & make th Previous button invisible (showsButtons prop needs to be stated true along) |
| buttonTextStyle | gives common styling to text of all buttons |
| disablePrevButton | Both button will be shown but Previous Button won't work |
| disableNextButton | Both button will be shown but Next Button won't work |
| animate | state is to 'faded' & fading animation will be applied (works good with autoplay,pagination click or button click) |
| items | Enables Carousel give it a number {2},{3},{4} etc & carousel will be automatically enabled (giving it {1.2},{1.5},{2.5} shows some portion/percentage of view accordingly) - [many props might not work good when using this prop since it changes swiper to carousel] |
Contact me at mohit.chawla@workmail.com
No vulnerabilities found.
No security vulnerabilities found.