A Carousel

Description

A React Project to simplify UI Carousels

Examples of a-carousel

---

Setup a-carousel

Package Manager

// npm
npm install a-carousel

// yarn
yarn add a-carousel

Include the CSS file

1. webpack [recommended]
2. import the file directly
3. grunt

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. <App /> 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 <link> 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	true false	...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	outside inside bottom below	Determines the location of the next/prev arrow placement
✅	arrowStyleBackward	string	default	default <classname>	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 <classname>	Applies the default styling or a custom classname for styling to the forward arrow. In the custom classname, utilize CSS properties: top, bottom, left, rightfor position of arrow. Utilize CSS properties: width, height, background-color, background-image, border etc. for styling of arrow.
✅	autoplay	boolean	false	true false	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	true false	Enable slide navigation dots to show the current slide
✅	dotsClick	boolean	true	true false	Enables indicator dots to be clickable to go to particular slide numbers
✅	dotsStyle	string	default	default <classname>	Applies the default styling or a custom classname for styling the dots navigation
❌	dotsPosition	string	below	bottom below	Determines the location of the dots navigation. Can be overrided by dotsStyle and adding position styling attributes
❌	touch	boolean	true	true false	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	true false	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	true false	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 a boolean 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/css3_pr_transition-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

1. optimize and minify build files // maybe change to webpack
2. finish Touch features