Slider

Example
基本
多图轮播
垂直滑动
导航按钮尺寸
导航锚点方向
导航锚点触发方式
自定义导航锚点
自定义导航箭头
导航箭头位置
自动播放
禁止循环
悬浮时暂停
外部控制
居中模式
ActiveIndex
不同的图片宽度
使用自定义组件
弹出来的跑马灯
Fade
onChange 钩子
API

轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。

何时使用 #

轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。
单图轮播：该样式通常用于承载运营banner，是一个位置相对固定的模块。
多图轮播：单元信息浏览

如何使用 #

当轮播组件中只有一张图片的时候，轮播组件会隐藏导航锚点、禁止自动循环（即使上层设置了）、禁止拖拽播放（即使上层设置了）。
如果您要将 Slider 放到 Dialog 中，此时你需要关闭 Dialog 的动画，避免 Slider 在计算内部元素宽度时造成出错。
如果出现图片高度 1px 的问题，可以尝试在 img 标签的外部包裹一层 div 标签。

代码演示 #

基本 #

轮播组件共有两种类型：单图轮播和多图同时轮播。在默认模式下（不指定任何属性值），轮播组件为单图轮播模式。

注意： 如果出现图片 1px 高度的问题，建议将图片的外部包括一层 div 来避免这个问题。

多图轮播 #

在单图轮播的基础上，通过指定slidesToShow属性值，可以同时进行多图轮播。可以通过 slidesToScroll 属性制定单次轮播图片的个数。

垂直滑动 #

轮播组件可以通过 slideDirection 属性设置两种轮播方向。当值为 ver 时轮播方向为垂直方向，默认为值为 hoz 。垂直模式也可以设置单图和多图轮播。

import ReactDOM from 'react-dom';
import { Slider } from '@alifd/next';
ReactDOM.render(
  <div style={{ width: '200px' }}>
    <div className="demo-item-title">Vertical multi-picture mode</div>
    <Slider
      slideDirection="ver"
      slidesToShow={3}
      slidesToScroll={1}
      dots={false}
      arrowPosition="inner"
      arrowDirection="ver"
      className="ver-slick"
    >
      {[1, 2, 3, 4, 5].map((item, index) => (
        <div key={index} className="custom-slider" style={{ border: '1px solid transparent' }}>
          <h3 className="h3">{item}</h3>
        </div>
      ))}
    </Slider>
    <div className="demo-item-title">Vertical single-picture mode</div>
    <Slider
      slideDirection="ver"
      dots={false}
      arrowPosition="inner"
      arrowDirection="ver"
      className="ver-slick"
    >
      {[1, 2, 3, 4, 5].map((item, index) => (
        <div key={index} className="custom-slider">
          <h3 className="h3">{item}</h3>
        </div>
      ))}
    </Slider>
  </div>,
  mountNode
);

导航按钮尺寸 #

可以通过arrowSize属性来更改导航组件的按钮尺寸，默认值为normal，对特定场景，比如展示的图片较大的情况下，可以选择large，将导航按钮设置为大按钮。

import ReactDOM from 'react-dom';
import { Slider } from '@alifd/next';
const bigSlides = [
  {
    url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
    text: 'Tape Player Skin Design Competition',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
    text: 'Mobile Phone Taobao Skin Call',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
    text: 'Design Enabling Public Welfare',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg',
    text: 'Amoy Doll Design Competition',
  },
];
ReactDOM.render(
  <div>
    <Slider>
      {bigSlides.map((item, index) => (
        <div key={index} className="slider-img-wrapper">
          <img src={item.url} alt={item.text} />
        </div>
      ))}
    </Slider>
    <br />
    <Slider arrowSize="large">
      {bigSlides.map((item, index) => (
        <div key={index} className="slider-img-wrapper">
          <img src={item.url} alt={item.text} />
        </div>
      ))}
    </Slider>
  </div>,
  mountNode
);

导航锚点方向 #

通过 dotsDirection 可以改变导航锚点的位置，默认为 hoz 即水平方向。当其值设为 ver 时为垂直方向展示。

导航锚点触发方式 #

通过 triggerType 可以定义dots触发方式，共有两种触发方式：['click', 'hover']; 当其值设为 hover 时为鼠标经过触发滚动。

自定义导航锚点 #

通过 dotsRender 可以自定义修改dost，通过 dotsClass 可覆盖dots的样式。

自定义导航箭头 #

开发者可以通过 prevArrow 和 nextArrow 两个属性传入自定义的导航箭头组件。

import ReactDOM from 'react-dom';
import { Slider, Icon } from '@alifd/next';
const slides = [
  {
    url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
    text: 'Tape Player Skin Design Competition',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
    text: 'Mobile Phone Taobao Skin Call',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
    text: 'Design Enabling Public Welfare',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg',
    text: 'Amoy Doll Design Competition',
  },
];
const arrowStyle = {
  display: 'block',
  background: 'red',
  opacity: 1,
  margin: '0 20px',
};
const CustomNextArrow = props => {
  return (
    <div {...props} style={arrowStyle}>
      <Icon type="arrow-double-right" />
    </div>
  );
};
const CustomPrevArrow = props => {
  return (
    <div {...props} style={arrowStyle}>
      <Icon type="arrow-double-left" />
    </div>
  );
};
ReactDOM.render(
  <Slider nextArrow={<CustomNextArrow />} prevArrow={<CustomPrevArrow />} lazyLoad>
    {slides.map((item, index) => (
      <div key={index} className="slider-img-wrapper">
        <img src={item.url} alt={item.text} />
      </div>
    ))}
  </Slider>,
  mountNode
);

导航箭头位置 #

轮播组件的导航按钮在默认情况下为内置模式。在多图同时导航的情况下，如果想要使用外置按钮，可以通过指定arrowPosition的属性值为outer，使用外置按钮，其默认值为inner。

自动播放 #

可以通过 autoplay 和 autoplaySpeed 属性来设置组件是否自动轮播和自动轮播的速度。

import ReactDOM from 'react-dom';
import { Slider } from '@alifd/next';
ReactDOM.render(
  <div style={{ width: '600px' }}>
    <Slider
      slidesToShow={4}
      arrowPosition="outer"
      lazyLoad
      dots={false}
      autoplay
      autoplaySpeed={1e3}
    >
      <div style={{ width: '25%' }}>
        <h4 className="h4">1</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">2</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">3</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">4</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">5</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">6</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">7</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">8</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">9</h4>
      </div>
    </Slider>
    <br />
    <Slider speed={1e3} autoplay autoplaySpeed={2e3}>
      <div style={{ width: '25%' }}>
        <h4 className="h4">1</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">2</h4>
      </div>
      <div style={{ width: '25%' }}>
        <h4 className="h4">3</h4>
      </div>
    </Slider>
  </div>,
  mountNode
);

禁止循环 #

默认情况下，轮播组件的表现为无穷循环模式。如果你不想无穷循环，可以通过设置 infinite 为 false，用来禁止循环模式。

值得注意的是，由于组件的默认行为是无穷模式，所以默认情况下，自动将单张图片复制了两份，如果你不想启用这样的复制效果，只要关闭 infinite 属性即可。

悬浮时暂停 #

可以通过设置 pauseOnHover 属性为 true 使得 Slide 在鼠标悬浮时自动停止轮播。

外部控制 #

用户可以包装 Slider 组件，以便进行外部控制。例如通过包装组件实现外部对 Slider 组件 autoplay 和 autoplaySpeed 值的控制。

import { useState } from 'react';
import ReactDOM from 'react-dom';
import { Slider, Select } from '@alifd/next';
const { Option } = Select;
const Demo = () => {
  const [autoplay, setAutoplay] = useState(false);
  const [autoplaySpeed, setAutoplaySpeed] = useState(1e3);
  const onSelectAutoplay = value => {
    setAutoplay(value);
  };
  const onSelectAutoplaySpeed = value => {
    setAutoplaySpeed(value);
  };
  return (
    <div>
      <Select placeholder="Autoplay" onChange={onSelectAutoplay}>
        <Option value>True</Option>
        <Option value={false}>False</Option>
      </Select>
      <br />
      <br />
      <Select placeholder="Autoplay Speed" onChange={onSelectAutoplaySpeed}>
        <Option value={1e3}>1 second</Option>
        <Option value={2e3}>2 seconds</Option>
        <Option value={3e3}>3 seconds</Option>
      </Select>
      <br />
      <br />
      <Slider autoplay={autoplay} autoplaySpeed={autoplaySpeed}>
        <div>
          <h3 className="h3">1</h3>
        </div>
        <div>
          <h3 className="h3">2</h3>
        </div>
        <div>
          <h3 className="h3">3</h3>
        </div>
        <div>
          <h3 className="h3">4</h3>
        </div>
      </Slider>
    </div>
  );
};
ReactDOM.render(<Demo />, mountNode);

居中模式 #

居中模式可以突出显示最核心区域的内容，您可以通过设置 centerMode 属性址为 true 开启该功能。

ActiveIndex #

通过 index 属性可以快速的定位到指定次序的 slider 。

import { Component } from 'react';
import ReactDOM from 'react-dom';
import { Slider } from '@alifd/next';
const slides = [
  {
    url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
    text: 'Tape Player Skin Design Competition',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
    text: 'Mobile Phone Taobao Skin Call',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
    text: 'Design Enabling Public Welfare',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg',
    text: 'Amoy Doll Design Competition',
  },
];
class SlickGoTo extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      index: 0,
      // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.
    };
    this.changeHandler = e => {
      this.setState({
        index: parseInt(e.target.value),
      });
    };
  }
  render() {
    const settings = {
      dots: false,
      infinite: true,
      activeIndex: this.state.index,
    };
    return (
      <div>
        <div className="demo-item-title">Pull the scroll bar to switch:</div>
        <input onChange={this.changeHandler} defaultValue={0} type="range" min={0} max={3} />
        <Slider {...settings}>
          {slides.map((item, index) => (
            <div key={index} className="slider-img-wrapper">
              <img src={item.url} alt={item.text} />
            </div>
          ))}
        </Slider>
      </div>
    );
  }
}
ReactDOM.render(<SlickGoTo />, mountNode);

不同的图片宽度 #

Slider 在默认情况下会认为所有的子元素是等宽的。通过设置 variableWidth 为 true，您可以在 Slider 中放置不同宽度的图片。

使用自定义组件 #

你可以为传递自定义组件到 Slider 组件中。前提是该组件一定要开放透传 props 到下层组件或元素，Slider 底层需要执行元素的 clone 操作。

弹出来的跑马灯 #

如果你要将 Slider 放到 Dialog 中，此时你需要关闭 Dialog 的动画，避免 Slider 在计算内部元素宽度时造成出错。

import { Component } from 'react';
import ReactDOM from 'react-dom';
import { Slider, Dialog, Button } from '@alifd/next';
import PropTypes from 'prop-types';
const slides = [
  {
    url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png',
    text: 'Tape Player Skin Design Competition',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg',
    text: 'Mobile Phone Taobao Skin Call',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg',
    text: 'Design Enabling Public Welfare',
  },
  {
    url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg',
    text: 'Amoy Doll Design Competition',
  },
];
const dialogStyle = {
  width: '800px',
};
class FlappySlider extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      visible: false,
    };
    this.setVisible = () => {
      this.setState(prevState => {
        return {
          visible: !prevState.visible,
        };
      });
    };
  }
  render() {
    return (
      <div className="demo-wrapper">
        <Button type="primary" onClick={this.setVisible}>
          Marquee Banner
        </Button>
        <Dialog
          visible={this.state.visible}
          title="Alibaba.com"
          footer={false}
          style={dialogStyle}
          animation={false}
          onClose={this.setVisible}
        >
          <Slider>
            {this.props.slides.map((item, index) => (
              <div key={index} className="slider-img-wrapper">
                <img key={index} src={item.url} alt={item.text} />
              </div>
            ))}
          </Slider>
        </Dialog>
      </div>
    );
  }
}
FlappySlider.propTypes = {
  slides: PropTypes.array,
};
ReactDOM.render(<FlappySlider slides={slides} />, mountNode);

Fade #

切换跑马灯时使用渐变效果。

onChange 钩子 #

你可以利用 onChange 钩子函数处理一些额外的逻辑。

API #

Slider #

参数	说明	类型	默认值
className	自定义传入的样式	string	-
adaptiveHeight	是否使用自适应高度	boolean	false
animation	动效类型，默认是'slide'	string \| boolean	'slide'
arrows	是否显示箭头	boolean	true
arrowSize	导航箭头大小	'medium' \| 'large'	'medium'
arrowPosition	导航箭头位置	'inner' \| 'outer'	'inner'
arrowDirection	导航箭头方向	'hoz' \| 'ver'	'hoz'
autoplay	是否自动播放	boolean	false
autoplaySpeed	自动播放的速度	number	3000
prevArrow	前向箭头节点	ReactElement	-
nextArrow	后向箭头节点	ReactElement	-
centerMode	是否启用居中模式	boolean	false
dots	是否显示导航锚点	boolean	true
dotsDirection	导航锚点方向	'hoz' \| 'ver'	'hoz'
dotsRender	自定义导航锚点签名: 参数: index: 锚点编号 current: 当前幻灯片编号	(index: number, current: number) => void	-
draggable	是否可拖拽	boolean	true
infinite	是否使用无穷循环模式	boolean	true
defaultActiveIndex	初始被激活的轮播图	number	0
lazyLoad	是否启用懒加载	boolean	false
slideDirection	轮播方向	'hoz' \| 'ver'	'hoz'
slidesToShow	同时展示的图片数量	number	1
slidesToScroll	同时滑动的图片数量	number	1
speed	轮播速度	number	600
activeIndex	跳转到指定的轮播图（受控）	number	-
triggerType	导航锚点触发方式	'click' \| 'hover'	'click'
onChange	轮播切换的回调函数	(index: number) => void	-
centerPadding	center 模式下的边缘 padding 值 (px or %);	string	'50px'
cssEase	CSS3 Animation Easing，默认‘ease’	string	'ease'
focusOnSelect	多图轮播时，是否在点击选中后自动居中	boolean	'false'
style	自定义样式	CSSProperties	-
waitForAnimate	是否等待动画结束后再执行动作	boolean	true

说明 #

next-slider is forked from react-slick.