a-carousel

### Description A React Project to simplify UI Carousels

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
a-carousel
1.1.46 years ago7 years agoMinified + gzip package size for a-carousel in KB

Readme

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. \ 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 | 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
\ | 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, 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
\ | 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/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

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