carefree-carousel

A click-based carousel (run it care-free).

Installing

npm install carefree-carousel

Importing usage

1. import Carousel from 'carefree-carousel';

2. 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

https://user-images.githubusercontent.com/88824507/134108105-acd1dc0d-30f6-4e6f-a83a-71b97109b001.mov

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:

• 1st default slide picture
• 2nd default slide picture
• 3rd default slide picture

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.