# react-carousel-flexie

> This is a kind of flexible react carousel component. # What is it? It's a carousel component which you can give (clickable) images as properties. It navigates to right or left when clicked on the arrows. It has some config options, like *navigate with o

Latest version **2.0.3** (published 2018-02-11) · 0 weekly downloads

## Install

```sh
npm install react-carousel-flexie
pnpm add react-carousel-flexie
yarn add react-carousel-flexie
bun add react-carousel-flexie
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2018-02-11 |
| First published | 2017-12-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Wim J. Jansen |
| Maintainers | welja |

## Links

- npm: https://www.npmjs.com/package/react-carousel-flexie
- npm.io page: https://npm.io/package/react-carousel-flexie

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.1.1
- [webpack](https://npm.io/package/webpack.md) ^3.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.1.1
- [url-loader](https://npm.io/package/url-loader.md) ^0.6.2
- [react-scripts](https://npm.io/package/react-scripts.md) 1.0.17
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^15.6.2

## Recent versions

- 2.0.3 (latest) — 2018-02-11
- 2.0.2 — 2018-02-11
- 2.0.1 — 2018-02-07
- 2.0.0 — 2018-02-07
- 1.3.2 — 2018-01-04
- 1.3.1 — 2017-12-28
- 1.3.0 — 2017-12-28
- 1.2.0 — 2017-12-26
- 1.1.5 — 2017-12-20
- 1.1.4 — 2017-12-15
- 1.1.3 — 2017-12-15
- 1.1.2 — 2017-12-15
- 1.1.1 — 2017-12-15
- 1.1.0 — 2017-12-15
- 1.0.2 — 2017-12-13
- … 3 more at https://npm.io/package/react-carousel-flexie/versions

## README

This is a kind of flexible react carousel component.
# What is it?
It's a carousel component which you can give (clickable) images as properties. 
It navigates to right or left when clicked on the arrows.
It has some config options, like 
*navigate with or without animation
*show only a number of items
*execute a function when the image is clicked
*show the selected item in the center

# Installation

`npm install react-carousel-flexie`

# Versions
## 2.0.0
- Added option to auto-select the center item
- *** breaking change: clikhandler function receives value instead of event

# Usage

## Example

```javascript

    import Carousel from 'react-carousel-flexie';


        this.settings = {
            nViewItems: 3, // how many items are visisble?
            startPosition: 0, // position of the data item which should be shown first
            isAnimation: false, //navigate with or without animation
            isClickCenter: false, // item in center when clicked
            isHalfSides: false, // show half visible items on the sides
            isCenterSelected: false, // auto select item in the center position
            arrow: 5 // choose an arrow. Currently 13 arrows available. Try them out.
        };

        this.data = [
            {
                img: {
                    src: "./images/1.png",
                    aria: "some aria text",
                    value: "value which is used as an identifier",
                    click: this.testClick //your function to be executed when clicked 
                }
            },
            {
                img: {
                    src: "./images/2.png",
                    aria: "some aria text",
                    value: "value which is used as an identifier",
                    click: this.testClick //your function to be executed when clicked
                }
            },
            {
                img: {
                    src: "./images/3.png",
                    aria: "some aria text",
                    value: "value which is used as an identifier",
                    click: this.testClick //your function to be executed when clicked
                }
            },
            {
                img: {
                    src: "./images/4.png",
                    aria: "some aria text",
                    value: "value which is used as an identifier",
                    click: this.testClick //your function to be executed when clicked
                }
            }
        ];



    render() {
        return (
                <div width="auto" className="App">
                
                    <Carousel data={this.data} settings={this.settings}/>
                
                </div>
                            );
            }
        }
```
## function click
This function receives value property from your data

### Example
``` javascript

    this.testClick = function(value) {
        console.log(value);
    }
```

## Images
It seems best to use images within the constraints of 360px (width) x 275px heigth.
Place images in the webfolder :)

---
_Source: https://npm.io/package/react-carousel-flexie · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._