Adsum Carousel Component
Last updated 6 months ago by devadactiveasia .
UNLISENCED · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @adactiveasia/adasia-carousel 
SYNC missed versions from official npm registry.

Carousel component


Live examples here

Getting started

    npm i --save @adactive/arc-carousel


    yarn add @adactive/arc-carousel
    import AdsumCarousel from "@adactive/arc-carousel"


type PropsType = {|
    +isOpen: boolean,
    +medias: Array<MediaType>,
    +onMediaTouch: (MediaType) => void,
    +carouselOptions?: Object,
    +style?: CSSStyleDeclaration

static defaultProps = {
    isOpen: false,
    medias: [],
    onMediaTouch: null,
    carouselOptions: {
        dragging: false,
        swiping: false,
        speed: 1000,
        renderCenterLeftControls: null,
        renderCenterRightControls: null,
        renderCenterBottomControls: null,
        renderBottomCenterControls: null,
        arrows: false,
        pauseOnHover: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        adaptiveHeight: true,
        wrapAround: true,
    style: {},
    ButtonModalForImage: null,
    autoSlide: false,
    autoSlideInterval: 10000,

TO MAKE DYNAMIC INTERVAL -> media send to this carousel via medias should have interval field. If a media have this, then this media will have own interval. If haven't, the media will follow the general interval set (autoslideinterval)

isOpen -> To show or hide carousel

medias -> Array of medias to be displayed in the carousel

onMediaTouch -> A callback function to capture clicking of the media

carouselOptions -> Refer to nuka-carousel for more information. However, 2 of the following options in nuka carousel have been predefined in Adsum Carousel Component.

  • autoPlay: This option will be set to true if there is only 1 media in the carousel and false if there are multiple media.
  • afterSlide: This option will be a predefined callback function that plays a video immediately if the next media in the carousel is a video.

style -> To customise the CSS of the overall component

autoSlide -> Slider Looping in Boolean

autoSlideInterval -> Slider Looping Interval in ms

Copy component inside your project src folder

Less only

`npx @adactive/arc-carousel copy --less-only`

Full copy

`npx @adactive/arc-carousel copy`

Current Tags

  • 0.0.2                                ...           latest (6 months ago)

2 Versions

  • 0.0.2                                ...           6 months ago
  • 0.0.1                                ...           8 months ago
Maintainers (1)
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 0
Last Month 2
Dependencies (4)
Dev Dependencies (2)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |