a-carousel

### Description A React Project to simplify UI Carousels

Stats

StarsIssuesVersionUpdatedCreatedSize
a-carousel
1.1.44 years ago4 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. <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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.