@adactiveasia/react-alice-carousel 中文文档教程

Question

React Alice Carousel

React Alice Carousel 是一个用于构建内容画廊、内容旋转器和任何 React 轮播的 React 组件。

 Live demo (API): v2.x.x

 Previous version (API): v1.x.x

Features

• Auto Height
• Auto Play
• Auto Width
• Custom animation modes
• Custom rendered slides
• Infinite loop
• Lazy loading
• Mobile friendly
• Multiple items in the slide
• Responsive design
• Stage padding
• Show / hide anything (indicators, arrows, slides indexes)
• Swipe to slide
• Server side rendering friendly
• Touch and Drag support
• TypeScript

Installation

npm i react-alice-carousel

Style import

# CSS
@import "react-alice-carousel/lib/alice-carousel.css";

# SCSS
@import "react-alice-carousel/lib/scss/alice-carousel.scss";

Usage

import React from 'react';
import AliceCarousel from 'react-alice-carousel';
import 'react-alice-carousel/lib/alice-carousel.css';

const handleDragStart = (e) => e.preventDefault();

const items = [
  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
];

const Gallery = () => {
  return (
    <AliceCarousel mouseTracking items={items} />
  );
}

Options

• activeIndex : Number, default 0 - 在指定位置设置轮播。

• animationDuration：数字，默认 400 - 设置动画持续时间。

• animationEasingFunction：字符串或函数，默认ease - 属性设置动画如何在每个循环的持续时间内进行。

• animationType：String(slide, fadeout)，默认 slide - 设置动画类型。

• autoHeight：布尔值，默认 false - 设置自动高度模式。

• autoWidth：布尔值，默认 false - 设置自动宽度模式。

• autoPlay：布尔值，默认 false - 设置自动播放模式。

• autoPlayControls：布尔值，默认 false - 显示/隐藏 播放/暂停 按钮。

• autoPlayDirection：String(ltr, rtl)，默认 ltr - 设置自动播放方向值。

• autoPlayInterval：数字，默认 400 - 设置自动播放间隔值。

• autoPlayStrategy: String(default, action, all, none) - 设置一个自动播放模式的策略

  • default - pause automatic playback on the hover
  • action - stop automatic playback if user action was detected
  • all - merge default && action strategies
  • none - ignore any user actions when the autoPlay property was specified

• controlsStrategy: String (default, responsive, alternate or combined string "default, alternate") - 为图库控件设置策略。

  • default - use controls as is
  • alternate - show each dot for each slide
  • responsive - navigation will be hidden if the number of gallery elements is equal to the number of items in the slide.

• disableButtonsControls：布尔值，默认 false - 禁用按钮控件。

• disableDotsControls：布尔值，默认 false - 禁用点控件。

• disableSlideInfo：布尔值，默认 true - 禁用有关当前幻灯片的信息。

• infinite：布尔值，默认 false - 设置无限模式。

• innerWidth：Number，默认 0 - 为“responsive”属性的断点（key）设置一个静态值。 例如，如果您不能在 SSR 期间使用“window.innerWidth”。

• items：数组，默认 undefined - 设置图库项目，最好使用此属性而不是子项。

• keyboardNavigation：布尔值，默认值 false - 启用键盘导航

  • ArrowLeft - go to the prev slide
  • ArrowRight - go to the next slide
  • Space - run/stop autoplay mode if autoPlay property is equal true

• mouseTracking：布尔值，默认值 false - 启用鼠标拖动动画。

• paddingLeft：Number，默认 0 - 设置图库从左侧偏移。

• paddingRight：Number，默认 0 - 设置画廊从右边偏移。

• renderKey: Number, default undefined - 辅助属性，允许调用渲染方法而不改变画廊实例中的状态。

• responsive：对象，默认 undefined - 设置幻灯片中的项目数。 关键是断点（默认是：() => window.innerWidth 或 innerWidth 属性的结果，如果最后出现的话）。

      {
        0: {
            items: 1,
        },
        1024: {
            items: 3
        }
      }
  

• swipeDelta：数字，默认值 20 - 设置到滑动开始的最小距离 (px)。

• swipeExtraPadding：Number，默认 200 - 设置滑动动作停止前距初始位置的最大距离 (px)。

• ssrSilentMode：布尔值，默认 true - 禁用服务器端渲染的类名修饰符。

• touchTracking：布尔值，默认 true - 启用触摸移动动画。

• touchMoveDefaultEvents：布尔值，默认 true - 在滑动时启用触摸移动默认事件。 如果指定了 false，这会阻止父元素在滑动过程中垂直滚动。

• onInitialized(e: EventObject)：函数 - 在创建图库后作为回调触发。

• onResizeEvent(e: Event)：函数 - 在“调整大小”事件期间触发以确定是否调用事件处理程序。 () => 的默认结果 => 真；

• onResized(e: EventObject)：函数 - 在画廊调整大小后作为回调触发。

• onSlideChange(e: EventObject)：函数 - 在事件对象更改之前触发。

• onSlideChanged(e: EventObject)：函数 - 在事件对象更改后触发。

• renderSlideInfo(e: SlideInfo)：渲染函数 - 创建自定义组件。

• renderDotsItem(e: DotsItem)：渲染函数 - 创建自定义组件。

• renderPrevButton({ isDisabled })：渲染函数 - 创建自定义组件。

• renderNextButton({ isDisabled })：渲染函数 - 创建自定义组件。

• renderPlayPauseButton({ isPlaying })：渲染函数 - 创建自定义组件。

Methods

• slidePrev(e: Event) => void : Go to the prev slide.
• slideNext(e: Event) => void : Go to the next slide.
• slideTo(activeIndex?: number) => void : Go to the specified slide.

Types

type EventObject = {
  item: number;
  slide: number;
  itemsInSlide: number;
  isPrevSlideDisabled: boolean;
  isNextSlideDisabled: boolean;
  type: EventType;
};

type SlideInfo = {
  item: number;
  itemsCount: number;
};

type DotsItem = {
  isActive: boolean;
  activeIndex: number;
};

enum EventType {
  ACTION = 'action', // used if a general user action (button click or swipe)
  INIT = 'init',     // used if the initial event was triggered
  RESIZE = 'resize', // used if the gallery size was changed
  UPDATE = 'update', // used if the gallery was updated with props (activeIndex)
}

CSS classes

.alice-carousel

.alice-carousel__stage
.alice-carousel__stage-item

.alice-carousel__prev-btn
.alice-carousel__prev-btn-item

.alice-carousel__next-btn
.alice-carousel__next-btn-item

.alice-carousel__play-btn
.alice-carousel__play-btn-item

.alice-carousel__dots
.alice-carousel__dots-item

.alice-carousel__slide-info
.alice-carousel__slide-info-item

CSS modifiers

.alice-carousel.__ssr

.alice-carousel__stage-item.__active
.alice-carousel__stage-item.__cloned
.alice-carousel__stage-item.__target

.alice-carousel__next-btn-item.__inactive
.alice-carousel__prev-btn-item.__inactive

.alice-carousel__play-btn-item.__pause

.alice-carousel__dots-item.__active
.alice-carousel__dots-item.__custom

.alice-carousel__slide-info-item.__separator

Build the project locally

Clone

git clone https://github.com/maxmarinich/react-alice-carousel
cd react-alice-carousel

Run

npm i
npm start

Test

npm test

License

麻省理工学院