@adactiveasia/adasia-carousel 中文文档教程
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,
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,
};
进行动态间隔 -> 通过媒体发送到此传送带的媒体应该有间隔字段。 如果一个媒体有这个，那么这个媒体就会有自己的区间。 如果没有，媒体将遵循一般间隔设置 (autoslideinterval)
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
autoSlide -> 布尔值
autoSlideInterval 中的滑块循环 -> 以毫秒为单位的滑块循环间隔
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
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,
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`
