Slider 图片轮播

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。

何时使用

  • 单图轮播：该样式通常用于承载运营banner，是一个位置相对固定的模块。

  • 多图轮播：单元信息浏览

使用注意点

  • 当轮播组件中只有一张图片的时候，轮播组件会隐藏导航锚点、禁止自动循环（即使上层设置了）、禁止拖拽播放（即使上层设置了）。

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

  • 如果出现图片高度 1px 的问题，可以尝试在 img 标签的外部包裹一层 div 标签。

API

Slider

参数说明类型默认值
adaptiveHeight是否使用自适应高度Booleanfalse
animation动效类型，默认是'slide'String/Boolean'slide'
arrows是否显示箭头Booleantrue
arrowSize导航箭头大小 可选值: 'medium', 'large'可选值:'medium', 'large'Enum'medium'
arrowPosition导航箭头位置 可选值: 'inner', 'outer'可选值:'inner', 'outer'Enum'inner'
arrowDirection导航箭头的方向 可选值: 'hoz', 'ver'可选值:'hoz', 'ver'Enum'hoz'
autoplay是否自动播放Booleanfalse
autoplaySpeed自动播放的速度Number3000
nextArrow向后箭头ReactElementnull
prevArrow向前箭头ReactElementnull
centerMode是否启用居中模式Booleanfalse
dots是否显示导航锚点Booleantrue
dotsDirection导航锚点位置可选值:'hoz', 'ver'Enum'hoz'
dotRender自定义导航锚点签名:Function() => voidFunction-
draggable是否可拖拽Booleantrue
infinite是否使用无穷循环模式Booleantrue
defaultActiveIndex初始被激活的轮播图Number0
lazyLoad是否启用懒加载Booleanfalse
slideDirection轮播方向可选值:'hoz', 'ver'Enum'hoz'
slidesToShow同时展示的图片数量Number1
slidesToScroll同时滑动的图片数量Number1
speed轮播速度Number500
activeIndex跳转到指定的轮播图（受控）Number-
triggerType锚点导航触发方式可选值:'click', 'hover'Enum'click'
onChange轮播切换的回调函数签名:Function(index: Number) => void参数:index: {Number} 幻灯片的索引Function() => {}
centerPaddingSide padding when in center mode (px or %); 展示部分为center，pading会产生前后预览String'50px'
cssEaseCSS3 Animation Easing,默认‘ease’String'ease'
focusOnSelect多图轮播时，点击选中后自动居中Booleanfalse

说明

next-slider is forked from react-slick

代码示例

基本

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

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

Slider 图片轮播 - 图1

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const slides = [
  4.     { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
  5.     { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
  6.     { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
  7.     { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }
  8. ];
  10. const itemNodes = slides.map((item, index) => <div key={index} className="slider-img-wrapper"><img src={item.url} alt={item.text} /></div>);
  12. ReactDOM.render(<Slider>{itemNodes}</Slider>, mountNode);
  1. .slider-img-wrapper img{
  2.     width: 100%;
  3. }

多图轮播

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

Slider 图片轮播 - 图2

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => <div style={{width: '25%'}} key={item}><h4 className="h4">{item}</h4></div>);
  5. ReactDOM.render(
  6.     <div style={{width: '600px'}}>
  7.         <div className="demo-item-title">slide one picture one at a time</div>
  8.         <Slider slidesToShow={4} arrowPosition="outer" dots={false} lazyLoad >
  9.             {slides}
  10.         </Slider>
  12.         <div className="demo-item-title">slide multiple picture one at a time</div>
  13.         <Slider slidesToShow={4} slidesToScroll={4} arrowPosition="outer" lazyLoad dots={false}>
  14.             {slides}
  15.         </Slider>
  16.     </div>
  17.     , mountNode);
  1. .next-slick .h3, .h4 {
  2.     margin: 0 5px;
  3.     background: #4F74B3;
  4.     color: #fff;
  5.     line-height: 150px;
  6.     text-align: center;
  7.     margin-top: 0;
  8.     margin-bottom: 0;
  9. }
  11. .demo-item-title {
  12.     font-size: 16px;
  13.     color: #333;
  14.     padding: 8px;
  15.     margin: 20px 0 10px 0;
  16. }

垂直滑动

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

Slider 图片轮播 - 图3

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. ReactDOM.render(<div style={{ width: '200px' }}>
  4.     <div className="demo-item-title">Vertical multi-picture mode</div>
  5.     <Slider slideDirection="ver" slidesToShow={3} slidesToScroll={1} dots={false} arrowPosition="inner" arrowDirection="ver" className="ver-slick">
  6.         {
  7.             [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>)
  8.         }
  9.     </Slider>
  11.     <div className="demo-item-title">Vertical single-picture mode</div>
  12.     <Slider slideDirection="ver" dots={false} arrowPosition="inner" arrowDirection="ver" className="ver-slick">
  13.         {
  14.             [1, 2, 3, 4, 5].map((item, index) => <div key={index} className="custom-slider"><h3 className="h3">{item}</h3></div>)
  15.         }
  16.     </Slider>
  17. </div>, mountNode);
  1. .ver-slick .h3 {
  2.         background: #4F74B3;
  3.         color: #fff;
  4.         line-height: 150px;
  5.         text-align: center;
  6.         font-size: 36px;
  7.         margin-top: 0;
  8.         margin-bottom: 0;
  9. }
  11. .demo-item-title {
  12.     font-size: 16px;
  13.     color: #333;
  14.     padding: 8px;
  15.     margin: 20px 0 10px 0;
  16. }

导航按钮尺寸

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

Slider 图片轮播 - 图4

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const bigSlides = [
  4.     { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
  5.     { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
  6.     { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
  7.     { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }
  8. ];
  10. ReactDOM.render(<div>
  11.     <Slider>
  12.         {
  13.             bigSlides.map((item, index) => <div key={index} className="slider-img-wrapper"><img src={item.url} alt={item.text} /></div>)
  14.         }
  15.     </Slider>
  17.     <br />
  19.     <Slider arrowSize="large">
  20.         {
  21.             bigSlides.map((item, index) => <div key={index} className="slider-img-wrapper"><img src={item.url} alt={item.text} /></div>)
  22.         }
  23.     </Slider>
  24. </div>, mountNode);
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }

导航锚点方向

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

Slider 图片轮播 - 图5

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. ReactDOM.render(
  4.     <div>
  5.         <Slider dotsDirection="hoz" arrows={false}>
  6.             <div><h3 className="h3">1</h3></div>
  7.             <div><h3 className="h3">2</h3></div>
  8.             <div><h3 className="h3">3</h3></div>
  9.             <div><h3 className="h3">4</h3></div>
  10.         </Slider>
  12.         <br />
  14.         <Slider dotsDirection="ver" arrows={false}>
  15.             <div><h3 className="h3">1</h3></div>
  16.             <div><h3 className="h3">2</h3></div>
  17.             <div><h3 className="h3">3</h3></div>
  18.             <div><h3 className="h3">4</h3></div>
  19.         </Slider>
  20.     </div>
  21.     , mountNode);
  1. .next-slick .h3, .h4 {
  2.         background: #4F74B3;
  3.         color: #fff;
  4.         line-height: 150px;
  5.         text-align: center;
  6.         margin-top: 0;
  7.         margin-bottom: 0;
  8. }
  10. .next-slick .h4 {
  11.         margin-right: 5px;
  12.         position: relative;
  13. }

导航锚点触发方式

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

Slider 图片轮播 - 图6

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. ReactDOM.render(
  4.     <div>
  5.         <Slider triggerType="click" arrows={false} >
  6.             <div><h3 className="h3">1</h3></div>
  7.             <div><h3 className="h3">2</h3></div>
  8.             <div><h3 className="h3">3</h3></div>
  9.             <div><h3 className="h3">4</h3></div>
  10.         </Slider>
  11.         <br/>
  12.         <Slider triggerType="hover" arrows={false} >
  13.             <div><h3 className="h3">1</h3></div>
  14.             <div><h3 className="h3">2</h3></div>
  15.             <div><h3 className="h3">3</h3></div>
  16.             <div><h3 className="h3">4</h3></div>
  17.         </Slider>
  18.     </div>
  19.     , mountNode);
  1. .next-slick .h3, .h4 {
  2.         background: #4F74B3;
  3.         color: #fff;
  4.         line-height: 150px;
  5.         text-align: center;
  6.         margin-top: 0;
  7.         margin-bottom: 0;
  8. }
  10. .next-slick .h4 {
  11.         margin-right: 5px;
  12.         position: relative;
  13. }

自定义导航锚点

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

Slider 图片轮播 - 图7

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. ReactDOM.render(
  4.     <div>
  5.         <Slider dotsClass="dots-cust" dotsDirection="hoz" arrows={false} dotsRender={(index, current) => {
  6.             console.log('current', current);
  7.             return <a>{index}</a>;
  8.         }}>
  9.             <div><h3 className="h3">0</h3></div>
  10.             <div><h3 className="h3">1</h3></div>
  11.             <div><h3 className="h3">2</h3></div>
  12.             <div><h3 className="h3">3</h3></div>
  13.             <div><h3 className="h3">4</h3></div>
  14.         </Slider>
  15.     </div>
  16.     , mountNode);
  1. .next-slick .h3, .h4 {
  2.         background: #4F74B3;
  3.         color: #fff;
  4.         line-height: 150px;
  5.         text-align: center;
  6.         margin-top: 0;
  7.         margin-bottom: 0;
  8. }
  10. .next-slick .h4 {
  11.         margin-right: 5px;
  12.         position: relative;
  13. }
  15. .dots-cust {
  16.   color: #fff;
  17. }
  18. .dots-cust a{
  19.   dispaly: block;
  20.   background: rgba(200,200,200,.4);
  21.   padding: 0 4px;
  22. }
  23. .dots-cust .active a{
  24.   color: rgb(70, 188, 2);
  25. }

自定义导航箭头

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

Slider 图片轮播 - 图8

查看源码在线预览

  1. import { Slider, Icon } from '@alifd/next';
  3. const slides = [
  4.     { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
  5.     { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
  6.     { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
  7.     { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }
  8. ];
  10. const arrowStyle = {
  11.     display: 'block',
  12.     background: 'red',
  13.     opacity: 1,
  14.     margin: '0 20px'
  15. };
  17. const CustomNextArrow = (props) => {
  18.     return <div {...props} style={arrowStyle}><Icon type="arrow-double-right" /></div>;
  19. };
  21. const CustomPrevArrow = (props) => {
  22.     return <div {...props} style={arrowStyle}><Icon type="arrow-double-left" /></div>;
  23. };
  25. ReactDOM.render(
  26.     <Slider nextArrow={<CustomNextArrow />} prevArrow={<CustomPrevArrow />} lazyLoad>
  27.         {
  28.             slides.map((item, index) => <div key={index} className="slider-img-wrapper"><img src={item.url} alt={item.text} /></div>)
  29.         }
  30.     </Slider>
  31.     , mountNode);
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }

导航箭头位置

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

Slider 图片轮播 - 图9

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. ReactDOM.render(
  4.     <div>
  5.         <Slider slidesToShow={4} arrowPosition="outer">
  6.             <div style={{width: '25%'}}><h4 className="h4">1</h4></div>
  7.             <div style={{width: '25%'}}><h4 className="h4">2</h4></div>
  8.             <div style={{width: '25%'}}><h4 className="h4">3</h4></div>
  9.             <div style={{width: '25%'}}><h4 className="h4">4</h4></div>
  10.             <div style={{width: '25%'}}><h4 className="h4">5</h4></div>
  11.         </Slider>
  13.         <br />
  15.         <Slider>
  16.             <div><h3 className="h3">1</h3></div>
  17.             <div><h3 className="h3">2</h3></div>
  18.             <div><h3 className="h3">3</h3></div>
  19.             <div><h3 className="h3">4</h3></div>
  20.         </Slider>
  21.     </div>
  22.     , mountNode);
  1. .next-slick .h3, .h4 {
  2.     background: #4F74B3;
  3.     color: #fff;
  4.     line-height: 150px;
  5.     text-align: center;
  6.     margin-top: 0;
  7.     margin-bottom: 0;
  8. }
  10. .next-slick .h4 {
  11.     margin: 0 5px;
  12.     position: relative;
  13. }

自动播放

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

Slider 图片轮播 - 图10

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. ReactDOM.render(
  4.     <div style={{width: '600px'}}>
  5.         <Slider slidesToShow={4} arrowPosition="outer" lazyLoad dots={false} autoplay autoplaySpeed={1000}>
  6.             <div style={{width: '25%'}}><h4 className="h4">1</h4></div>
  7.             <div style={{width: '25%'}}><h4 className="h4">2</h4></div>
  8.             <div style={{width: '25%'}}><h4 className="h4">3</h4></div>
  9.             <div style={{width: '25%'}}><h4 className="h4">4</h4></div>
  10.             <div style={{width: '25%'}}><h4 className="h4">5</h4></div>
  11.             <div style={{width: '25%'}}><h4 className="h4">6</h4></div>
  12.             <div style={{width: '25%'}}><h4 className="h4">7</h4></div>
  13.             <div style={{width: '25%'}}><h4 className="h4">8</h4></div>
  14.             <div style={{width: '25%'}}><h4 className="h4">9</h4></div>
  15.         </Slider>
  16.         <br/>
  17.         <Slider speed={1000} autoplay autoplaySpeed={2000}>
  18.             <div style={{width: '25%'}}><h4 className="h4">1</h4></div>
  19.             <div style={{width: '25%'}}><h4 className="h4">2</h4></div>
  20.             <div style={{width: '25%'}}><h4 className="h4">3</h4></div>
  21.         </Slider>
  22.     </div>
  23.     , mountNode);
  1. .next-slick .h3, .h4 {
  2.     margin: 0 5px;
  3.     background: #4F74B3;
  4.     color: #fff;
  5.     line-height: 150px;
  6.     text-align: center;
  7.     margin-top: 0;
  8.     margin-bottom: 0;
  9. }

禁止循环

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

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

Slider 图片轮播 - 图11

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. ReactDOM.render(
  4.     <div>
  5.         <Slider slidesToShow={4} arrowPosition="outer" infinite={false} dots={false}>
  6.             <div style={{width: '25%'}}><h4 className="h4">1</h4></div>
  7.             <div style={{width: '25%'}}><h4 className="h4">2</h4></div>
  8.             <div style={{width: '25%'}}><h4 className="h4">3</h4></div>
  9.             <div style={{width: '25%'}}><h4 className="h4">4</h4></div>
  10.             <div style={{width: '25%'}}><h4 className="h4">5</h4></div>
  11.         </Slider>
  13.         <br />
  15.         <Slider infinite={false} lazyLoad>
  16.             <div><h3 className="h3">1</h3></div>
  17.             <div><h3 className="h3">2</h3></div>
  18.             <div><h3 className="h3">3</h3></div>
  19.             <div><h3 className="h3">4</h3></div>
  20.         </Slider>
  21.     </div>
  22.     , mountNode);
  1. .next-slick .h3, .h4 {
  2.         background: #4F74B3;
  3.         color: #fff;
  4.         line-height: 150px;
  5.         text-align: center;
  6.         margin-top: 0;
  7.         margin-bottom: 0;
  8. }
  10. .next-slick .h4 {
  11.         margin: 0 5px;
  12.         position: relative;
  13. }

悬浮时暂停

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

Slider 图片轮播 - 图12

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const settings = {
  4.     className: 'custom-slide',
  5.     arrowPosition: 'outer',
  6.     dots: false,
  7.     infinite: true,
  8.     slidesToShow: 3,
  9.     slidesToScroll: 1,
  10.     autoplay: true,
  11.     autoplaySpeed: 2000,
  12.     pauseOnHover: true
  13. };
  15. ReactDOM.render(
  16.     <Slider {...settings}>
  17.         <div><h3>1</h3></div>
  18.         <div><h3>2</h3></div>
  19.         <div><h3>3</h3></div>
  20.         <div><h3>4</h3></div>
  21.         <div><h3>5</h3></div>
  22.         <div><h3>6</h3></div>
  23.         <div><h3>7</h3></div>
  24.         <div><h3>8</h3></div>
  25.         <div><h3>9</h3></div>
  26.     </Slider>
  27.     , mountNode);
  1. .custom-slide h3 {
  2.     background: #4F74B3;
  3.     color: #fff;
  4.     font-size: 36px;
  5.     line-height: 100px;
  6.     margin: 10px;
  7.     padding: 2%;
  8.     position: relative;
  9.     text-align: center;
  10. }

外部控制

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

Slider 图片轮播 - 图13

查看源码在线预览

  1. import { Slider, Select } from '@alifd/next';
  3. const { Option } = Select;
  5. class SliderWrapper extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  8.         this.state = {
  9.             autoplay: false,
  10.             autoplaySpeed: 1000
  11.         };
  12.     }
  14.     onSelectAutoplay(value) {
  15.         this.setState({ autoplay: value });
  16.     }
  18.     onSelectAutoplaySpeed(value) {
  19.         this.setState({ autoplaySpeed: value });
  20.     }
  22.     render() {
  23.         return (<div>
  24.             <Select placeholder="Autoplay" onChange={this.onSelectAutoplay.bind(this)}>
  25.                 <Option value>True</Option>
  26.                 <Option value={false}>False</Option>
  27.             </Select>
  28.             &nbsp;&nbsp;
  29.             <Select placeholder="Autoplay Speed" onChange={this.onSelectAutoplaySpeed.bind(this)}>
  30.                 <Option value={1000}>1 second</Option>
  31.                 <Option value={2000}>2 seconds</Option>
  32.                 <Option value={3000}>3 seconds</Option>
  33.             </Select>
  34.             <br />
  35.             <br />
  36.             <Slider autoplay={this.state.autoplay} autoplaySpeed={this.state.autoplaySpeed}>
  37.                 <div><h3 className="h3">1</h3></div>
  38.                 <div><h3 className="h3">2</h3></div>
  39.                 <div><h3 className="h3">3</h3></div>
  40.                 <div><h3 className="h3">4</h3></div>
  41.             </Slider>
  42.         </div>);
  43.     }
  44. }
  46. ReactDOM.render(<SliderWrapper />, mountNode);
  1. .next-slick .h3, .h4 {
  2.         background: #4F74B3;
  3.         color: #fff;
  4.         line-height: 150px;
  5.         text-align: center;
  6.         margin-top: 0;
  7.         margin-bottom: 0;
  8. }

居中模式

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

Slider 图片轮播 - 图14

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const settings = {
  4.     className: 'custom-slide center',
  5.     centerMode: true,
  6.     infinite: true,
  7.     dots: false,
  8.     arrowPosition: 'outer',
  9.     centerPadding: '60px',
  10.     slidesToShow: 3,
  11.     speed: 500
  12. };
  14. ReactDOM.render(
  15.     <Slider {...settings}>
  16.         <div><h3>1</h3></div>
  17.         <div><h3>2</h3></div>
  18.         <div><h3>3</h3></div>
  19.         <div><h3>4</h3></div>
  20.         <div><h3>5</h3></div>
  21.         <div><h3>6</h3></div>
  22.         <div><h3>7</h3></div>
  23.         <div><h3>8</h3></div>
  24.         <div><h3>9</h3></div>
  25.     </Slider>
  26.     , mountNode);
  1. .custom-slide h3 {
  2.     background: #4F74B3;
  3.     color: #fff;
  4.     font-size: 36px;
  5.     line-height: 100px;
  6.     margin: 10px;
  7.     padding: 2%;
  8.     position: relative;
  9.     text-align: center;
  10. }
  12. .center h3 {
  13.     opacity: 0.8;
  14.     transition: all 300ms ease;
  15. }
  17. .center .next-slick-center h3 {
  18.   color: #e67e22;
  19.   opacity: 1;
  20.   transform: scale(1.08);
  21. }

ActiveIndex

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

Slider 图片轮播 - 图15

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const slides = [
  4.     { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
  5.     { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
  6.     { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
  7.     { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }
  8. ];
  10. class SlickGoTo extends React.Component {
  11.     constructor(props) {
  12.         super(props);
  13.         this.state = {
  14.             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.
  15.         };
  16.         this.changeHandler = this.changeHandler.bind(this);
  17.     }
  18.     changeHandler(e) {
  19.         this.setState({
  20.             index: parseInt(e.target.value)
  21.         });
  22.     }
  23.     render() {
  24.         const settings = {
  25.             dots: false,
  26.             infinite: true,
  27.             activeIndex: this.state.index
  28.         };
  29.         return (
  30.             <div>
  31.                 <div className="demo-item-title">Pull the scroll bar to switch:</div>
  32.                 <input onChange={this.changeHandler} defaultValue={0} type="range" min={0} max={3} />
  33.                 <Slider {...settings}>
  34.                     {
  35.                         slides.map((item, index) => <div key={index} className="slider-img-wrapper"><img src={item.url} alt={item.text} /></div>)
  36.                     }
  37.                 </Slider>
  38.             </div>
  39.         );
  40.     }
  41. }
  43. ReactDOM.render(<SlickGoTo />, mountNode);
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }
  5. .demo-item-title {
  6.     font-size: 16px;
  7.     color: #333;
  8.     padding: 8px;
  9.     margin: 20px 0 10px 0;
  10. }

不同的图片宽度

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

Slider 图片轮播 - 图16

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const settings = {
  4.     className: 'custom-slide variable-width',
  5.     arrowPosition: 'outer',
  6.     dots: true,
  7.     infinite: true,
  8.     slidesToShow: 1,
  9.     slidesToScroll: 1,
  10.     variableWidth: true
  11. };
  13. ReactDOM.render(
  14.     <Slider {...settings}>
  15.         <div style={{width: 100}}><p>100</p></div>
  16.         <div style={{width: 200}}><p>200</p></div>
  17.         <div style={{width: 75}}><p>75</p></div>
  18.         <div style={{width: 300}}><p>300</p></div>
  19.         <div style={{width: 225}}><p>225</p></div>
  20.         <div style={{width: 175}}><p>175</p></div>
  21.     </Slider>
  22.     , mountNode);
  1. .variable-width .next-slick-slide p {
  2.   background: #4F74B3;;
  3.   height: 100px;
  4.   color: #fff;
  5.   margin: 5px;
  6.   line-height: 100px;
  7.   text-align: center;
  8. }

使用自定义组件

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

Slider 图片轮播 - 图17

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  2. import PropTypes from 'prop-types';
  4. const pages = [1, 2, 3, 4];
  6. function Inner({ children, ...others }) {
  7.     // Note that to transparently pass other attributes to the lower node, the Slider needs to perform the element's clone operation.
  8.     return (
  9.         <div {...others}>
  10.             {children}
  11.         </div>
  12.     );
  13. }
  15. Inner.propTypes = {
  16.     children: PropTypes.any
  17. };
  19. const slider = (<Slider>
  20.     {
  21.         pages.map((page, index) => {
  22.             return <Inner className="custom-inner" key={index}>custom {page}</Inner>;
  23.         })
  24.     }
  25. </Slider>);
  27. ReactDOM.render(<div>
  28.     {slider}
  29. </div>
  30.     , mountNode);
  1. .custom-inner {
  2.     background: #4F74B3;
  3.     color: #fff;
  4.     line-height: 150px;
  5.     text-align: center;
  6.     margin-top: 0;
  7.     margin-bottom: 0;
  8. }

弹出来的跑马灯

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

Slider 图片轮播 - 图18

查看源码在线预览

  1. import { Slider, Dialog, Button } from '@alifd/next';
  2. import PropTypes from 'prop-types';
  4. const slides = [
  5.     { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
  6.     { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
  7.     { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
  8.     { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }
  9. ];
  11. const dialogStyle = {
  12.     width: '800px'
  13. };
  15. class FlappySlider extends React.Component {
  16.     static propTypes = {
  17.         slides: PropTypes.array
  18.     }
  20.     constructor(props) {
  21.         super(props);
  23.         this.state = {
  24.             visible: false
  25.         };
  27.         this.setVisible = this.setVisible.bind(this);
  28.     }
  30.     setVisible() {
  31.         this.setState(prevState => {
  32.             return {
  33.                 visible: !prevState.visible
  34.             };
  35.         });
  36.     }
  38.     render() {
  39.         return (<div className="demo-wrapper">
  40.             <Button type="primary" onClick={this.setVisible}>Marquee Banner</Button>
  41.             <Dialog visible={this.state.visible} title="Alibaba.com" footer={false} style={dialogStyle} animation={false} onClose={this.setVisible}>
  42.                 <Slider>
  43.                     {
  44.                         this.props.slides.map((item, index) => <div key={index} className="slider-img-wrapper"><img key={index} src={item.url} alt={item.text} /></div>)
  45.                     }
  46.                 </Slider>
  47.             </Dialog>
  48.         </div>);
  49.     }
  50. }
  52. ReactDOM.render(<FlappySlider slides={slides}/>, mountNode);
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }

Fade

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

Slider 图片轮播 - 图19

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const settings = {
  4.     arrowPosition: 'outer',
  5.     dots: false,
  6.     animation: 'fade',
  7.     infinite: true,
  8.     speed: 500,
  9.     slidesToShow: 1,
  10.     slidesToScroll: 1,
  11.     className: 'custom-slide',
  12.     onChange: function (index) {
  13.         console.log('change Slide index', index);
  14.     }
  15. };
  17. ReactDOM.render(
  18.     <div>
  19.         <Slider {...settings}>
  20.             {[1, 2, 3, 4, 5, 6].map(function(d) {
  21.                 return <div key={d}><h3 onClick={() => console.log(d)} >{d}</h3></div>;
  22.             })}
  23.         </Slider>
  24.         <Slider {...settings}>
  25.             {[1, 2, 3, 4, 5, 6].map(function(d) {
  26.                 return <div key={d}><a href={`https://www.taobao.com/?some=${d}`} target="_blank">{d}</a></div>;
  27.             })}
  28.         </Slider>
  29.     </div>
  30.     , mountNode
  31. );
  1. .custom-slide h3, .custom-slide a {
  2.     display: block;
  3.     background: #4F74B3;
  4.     color: #fff;
  5.     font-size: 36px;
  6.     line-height: 100px;
  7.     margin: 10px;
  8.     padding: 2%;
  9.     position: relative;
  10.     text-align: center;
  11. }

onChange 钩子

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

Slider 图片轮播 - 图20

查看源码在线预览

  1. import { Slider } from '@alifd/next';
  3. const settings = {
  4.     className: 'custom-slide',
  5.     arrowPosition: 'outer',
  6.     dots: false,
  7.     infinite: true,
  8.     speed: 500,
  9.     slidesToShow: 1,
  10.     slidesToScroll: 1,
  11.     onChange: function (index) {
  12.         console.log('change Slide index', index);
  13.     }
  14. };
  16. ReactDOM.render(
  17.     <Slider {...settings}>
  18.         <div><h3>1</h3></div>
  19.         <div><h3>2</h3></div>
  20.         <div><h3>3</h3></div>
  21.         <div><h3>4</h3></div>
  22.         <div><h3>5</h3></div>
  23.         <div><h3>6</h3></div>
  24.         <div><h3>7</h3></div>
  25.         <div><h3>8</h3></div>
  26.         <div><h3>9</h3></div>
  27.     </Slider>
  28.     , mountNode);
  1. .custom-slide h3 {
  2.     background: #4F74B3;
  3.     color: #fff;
  4.     font-size: 36px;
  5.     line-height: 100px;
  6.     margin: 10px;
  7.     padding: 2%;
  8.     position: relative;
  9.     text-align: center;
  10. }

相关区块

Slider 图片轮播 - 图21

暂无相关区块