@adactive/arc-carousel 中文文档教程

发布于 3年前 浏览 5 项目主页 更新于 3年前

Carousel component

图片

此处有实例

Getting started

    npm i --save @adactive/arc-carousel

    yarn add @adactive/arc-carousel
    import AdsumCarousel from "@adactive/arc-carousel"
     ...
    <AdsumCarousel 
        isOpen=true 
        medias=[]
        onTouchToNavigate={this.onTouchToNavigate}
    />

Props

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,
        autoplayInterval: 10000,
        speed: 1000,
        renderCenterLeftControls: null,
        renderCenterRightControls: null,
        renderCenterBottomControls: null,
        renderBottomCenterControls: null,
        arrows: false,
        pauseOnHover: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        adaptiveHeight: true,
        wrapAround: true
    }
};

isOpen -> 显示或隐藏轮播

medias -> 要在轮播中显示的媒体数组

onMediaTouch -> 捕获媒体点击的回调函数

carouselOptions -> 有关详细信息,请参阅 nuka-carousel。 但是,在 Adsum Carousel Component 中预定义了以下 nuka carousel 中的 2 个选项。

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

样式 -> 自定义整体组件的CSS

Copy component inside your project src folder

Less only

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

Full copy

`npx @adactive/arc-carousel copy`

Carousel component

image

Live examples here

Getting started

    npm i --save @adactive/arc-carousel

OR

    yarn add @adactive/arc-carousel
    import AdsumCarousel from "@adactive/arc-carousel"
     ...
    <AdsumCarousel 
        isOpen=true 
        medias=[]
        onTouchToNavigate={this.onTouchToNavigate}
    />

Props

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,
        autoplayInterval: 10000,
        speed: 1000,
        renderCenterLeftControls: null,
        renderCenterRightControls: null,
        renderCenterBottomControls: null,
        renderBottomCenterControls: null,
        arrows: false,
        pauseOnHover: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        adaptiveHeight: true,
        wrapAround: true
    }
};

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

Copy component inside your project src folder

Less only

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

Full copy

`npx @adactive/arc-carousel copy`
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文