A-carousel NPM

A Carousel

Description

A React Project to simplify UI Carousels

Setup a-carousel

Package Manager

// npm
npm install a-carousel

// yarn
yarn add a-carousel

Include the CSS file

webpack [recommended]
import the file directly
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`	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`	outsideinsidebottombelow	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, 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\<classname>	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 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