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 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

    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

    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 :)