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 | 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, rightfor 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 astringfor the **arrowStyleBackward** property | | [9] | Must enter astringfor the **arrowStyleForward** property | | [10] | Must enter aboolean` 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