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

Published On October 14, 2020 12:27 PM

Last Updated October 14, 2020 12:27 PM