Carousel

The carousel is a lightbox or slide show component for cycling through a series of content. Our Carousel works with a series of images, text, or custom markup. We provide a lot of customization options like custom arrows, thumbnails and event handlers in order to suit a variety of scenarios.

Usage

//Sample Data for carousel
const data = [
        {
            slide: getRandom("image"),
            title: getRandom("quote")
        },
        {
            slide: getRandom("image"),
            title: getRandom("quote")
        },
        {
            slide: getRandom("image"),
            title: getRandom("quote")
        }
];

 

Basic Usage

//Simple Carousel
import {Carousel} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={false}
    data={data}
/>

 

//Carousel with Autoplay
import {Carousel} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={true}
    data={data}
/>

 

//Carousel with no thumbnails
import {Carousel} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={true}
    data={data}
    thumbnails = {false}
/>

 

//Carousel with no arrows
import {Carousel} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={true}
    data={data}
    arrows = {false}
/>

 

Advanced Usage

//Carousel with Custom Arrows
import {Carousel,Icon} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={true}
    data={data}
    previousArrow={<Icon type="ionicons" name='ios-arrow-back-outline'/>}
    nextArrow={<Icon type="ionicons" name='ios-arrow-forward-outline'/>}
/>

 

//Carousel with on slide change callback
import {Carousel,Icon} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={true}
    data={data}
    onChange={(index) => {
        alert('Slide changed to ' + index)
    }}
/>

 

//Carousel with on preselected slide
import {Carousel,Icon} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={true}
    data={data}
    onChange={(index) => {
        alert('Slide changed to ' + index)
    }}
    selectedIndex = {1}
/>

 

//get currently selected slide index
import {Carousel,Icon} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Carousel
    autoplay={true}
    ref = {(ref)=>{this.carousel=ref}}
    data={data}
    onChange={(index) => {
        alert('Slide changed to ' + index)
    }}
    selectedIndex = {1}
/>
// Use Static method getCurrentIndex
console.log(this.carousel.getCurrentIndex())

 

Supported properties {#supported-properties}

Properties	Description	Type	Default
autoplay	Should autoplay be enabled or not	Boolean	​false​
​data	data to be shown in slides	Array(SlideItem)	-
selectedIndex	currently selected slide's index	number	0
previousArrow	custom previous arrow	String | React Element	-
nextArrow	custom next arrow	String | React Element	-
onChange	on change slide event handler	function(slideIndex){}	-
thumbnails	Should thumbnails be enabled or not	Boolean	true
arrows	Should arrows be enabled or not	Boolean	true

Methods

Methods can be called on the component reference using refs as demonstrated above in advanced usage.

Properties	Description	Arguments	Returns
getCurrentIndex	To get current slide index	-	Number
goToImage	Go to specific slide	index:Number	-
goNext	Go to next slide	-	-
goPrevious	Go to previous slide	-	-