react-carousel-flexie v2.0.3

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