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

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

---