1.0.11 • Published 2 years ago
carefree-carousel v1.0.11
carefree-carousel
A click-based carousel (run it care-free).
Installing
npm install carefree-carousel
Importing usage
import Carousel from 'carefree-carousel';var Carousel = require('carefree-carousel');- If the above are not working or fitting your specific use-case try one of the other bundle versions by explicit import/require
(Example) import Carousel from 'carefree-carousel/dist/bundle.min.js'
Demo
This is how the parameters were loaded for the video above
<Carousel toggleDots={false} slideText={false} toggleNav={false} startIndex={0} delayTime={4000} />The content array expects either a valid React element or a valid image string.
content={[<div>An element</div>, "a-image-link-here", "other-image-link", <p>a new element</p>]}The navImg array expects two valid image strings in the following order
navImg={["image-for-left-arrow-here", "image-for-right-arrow-here"]}Features
1) Preloading images 2) Transitioning effect between images 3) Error checking for correct types (Will display an error message)
Documentation
| Parameter | Type | Default value(s) | Trigger action |
|---|---|---|---|
| autoPlay | bool | false | Toggle On/Off auto-play between slides |
| content | array | Provided 3 images | Add custom images or elements for each slide |
| delayTime | int | 3 seconds | Change the time between each slide |
| navImg | arrayOfStrings | Provided 2 images | Add custom images for pagination arrows |
| slideText | bool | true | Toggle displaying On/Off of current slide # |
| startIndex | int | 0 | Choose which slide to begin playback on |
| toggleDots | bool | false | Toggle displaying dots navigation On/Off |
| toggleNav | bool | true | Toggle displaying arrows navigation On/Off |
Image references
Thank you to Unsplash for image hosting and individual contributors for uploading their images:
Badges
Thank you to shields.io for the templates they have provided.
Dependency authors
Thank you to all dependency library authors, make sure to check them out if you get the chance.