A Carousel
Description
A React Project to simplify UI CarouselsExamples of a-carousel
Setup a-carousel
Package Manager
// npm
npm install a-carousel
// yarn
yarn add a-carousel
Include the CSS file
Example (include link here)
<div style={{width: '50%', margin: '0 auto'}}>
<Carousel>
<div>
<h1> 1 </h1>
</div>
<div>
<h1> 2 </h1>
</div>
<div>
<h1> 3 </h1>
</div>
</Carousel>
</div>
----------------------CSS Option 1: Webpack recommended
Require the css file from a-carousel in the parent component: Eg. \ or index.js
import 'a-carousel/build/styles.css';
Add css-loader and style-loader with:
yarn add css-loader style-loader --dev
or npm install css-loader style-loader --save-dev
Add the loaders to your
webpack.config.js
to allow for CSS imports:{test: /\.css$/,loader: "style-loader!css-loader"}
Now just build with
webpack
and voila CSS Option 2: Direct Link
Add the \ to the HTML file: Note: adjust to meet the correct path
``
<link rel='stylesheet' type='text/css' href='CORRECT-PATH/node_modules/a-carousel/build/styles.css' />
``CSS Option 3: Grunt
Need to create a solution for grunt
Options
| Done | Property | Type | Default | Values | Description | | :--: | :------: | :--: | :-----: | :----: | :---------: | | ❌ | accessability |boolean
| true
| truefalse | ...FIX!!! Enables tabbing and arrow key navigation. Unless autoplay: true, sets browser focus to current slide (or first of current slide set, if multiple slidesToShow) after slide change. For full a11y compliance enable focusOnChange in addition to this. | | ✅ | arrow |
boolean
| true
| true, false | Enable the next and previous buttons on the carousel |
| ✅ | arrowPosition | string
| inside
| outsideinside
bottom
below | Determines the location of the next/prev arrow placement | | ✅ | arrowStyleBackward |
string
| default
| default\ | Applies the default styling or a custom classname for styling to the backward arrow. In the custom classname, utilize CSS properties:
top, bottom, left, right
for position of arrow. Utilize CSS properties: width, height, background-color, background-image, border etc.
for styling of arrow. |
| ✅ | arrowStyleForward | string
| default
| default\ | Applies the default styling or a custom classname for styling to the forward arrow. In the custom classname, utilize CSS properties:
top, bottom, left, right
for position of arrow. Utilize CSS properties: width, height, background-color, background-image, border etc.
for styling of arrow. |
| ✅ | autoplay | boolean
| false
| truefalse | Automatically scroll through the slides inside the carousel | | ✅ | autoplaySpeed |
number
| 3(s)
| any number > 0 | Determines the amount of time spent before moving to the next carousel slide |
| ✅ | speed | number
| 0.3(s)
| any number > 0 | Determines the transition speed of the carousel slides in seconds |
| ✅ | timing | string
| ease-in-out
| Refer to: W3School CSS Transition-Timing-Property for all possible values | Determines the transition timing function of the carousel slides |
| ✅ | dots | boolean
| false
| truefalse | Enable slide navigation dots to show the current slide | | ✅ | dotsClick |
boolean
| true
| truefalse | Enables indicator dots to be clickable to go to particular slide numbers | | ✅ | dotsStyle |
string
| default
| default\ | Applies the default styling or a custom classname for styling the dots navigation | | ❌ | dotsPosition |
string
| below
| bottombelow | Determines the location of the dots navigation. Can be overrided by dotsStyle and adding position styling attributes | | ❌ | touch |
boolean
| true
| truefalse | Enabled touch scrolling of the carousel | | ❌ | touchThreshold |
number
| 0.5 | 0 < number <= 1 | To swipe a slide, you must scroll thos ratio of the slide |
| ❌ | z-index| number
| ... | ... | Sets the z-index of the carousel |
| ❌ | infinite | boolean
| true
| truefalse | Determines if you can scroll infinitely through the slides | | ✅ | initialSlide |
number
| 0 | 0 < number < # of slides | Determines which slide the carousel starts on |
| ❌ | allowButtonSpam | boolean
| false
| truefalse | Determines if you can spam click the forward/backward button or if you need to wait for the animation to finish |
To add additional styling to Carousel
| Element | Classname | | ------- | --------- | | Previous Slide Button |backwardButtonCarousel
|
| Next Slide Button | forwardButtonCarousel
|
| Navigation Dots | dotsCarousel
|
| Individual Nav Dots | dotsChildren
|
| ... | ... |FAQ
These are some common issues people have with setting up and using the a-carousel module.Error Messages
| Error Number | Description | | :----------: | ----------- | | 1 | Must have 2 or more children elements within the Carousel Component to be considered valid | | 2 | Must enter aboolean
for the arrow property |
| 3 | Must enter a number > 0
for the speed property |
| 4 | Must enter a valid CSS-transition-timing-function. Refer to https://www.w3schools.com/cssref/css3prtransition-timing-function.asp |
| 5 | Must enter a boolean
for the autoplay property |
| 6 | Must enter a number > 0
for the autoplaySpeed property |
| 7 | Must enter one of: outside, inside, bottom, below` |
| 8 | Must enter a string
for the arrowStyleBackward property |
| 9 | Must enter a string
for the arrowStyleForward property |
| 10 | Must enter a boolean
for the dots property |
| 11 | just enter a boolean value for the dotsClick property |
| 12 | Must enter a (int) number between 0 and (#slides - 1) for the initialSlide property |
| 13 | Must enter a string value for the property |To Do List
- optimize and minify build files // maybe change to webpack
- finish Touch features