Slider 图片轮播

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

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

Guide

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

何时使用

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

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

使用注意点

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

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

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

API

图片轮播

参数说明类型默认值
prefix样式前缀String'next-'
className自定义传入的样式String-
adaptiveHeight是否使用自适应高度Booleanfalse
animation是否开启动效Booleantrue
arrows是否显示箭头Booleantrue
arrowSize导航箭头大小可选值:'medium', 'large'Enum'medium'
arrowPos导航箭头位置可选值:'inline', 'outer'Enum'inline'
arrowDirection导航箭头的方向可选值:'horizontal', 'vertical'Enum'horizontal'
nextArrow向后箭头ReactElementnull
prevArrow向后箭头ReactElementnull
autoplay是否自动播放Booleanfalse
autoplaySpeed自动播放的速度Number3000
centerMode是否启用居中模式Booleanfalse
dots是否显示导航锚点Booleantrue
dotsDirection导航锚点到位置可选值:'horizontal', 'vertical'Enum'horizontal'
draggable是否可拖拽Booleantrue
fade是否使用淡入淡出效果Booleanfalse
infinite是否使用无穷循环模式Booleantrue
initialSlide初始被激活的轮播图Number0
lazyLoad是否启用懒加载Booleanfalse
slideDirection轮播方向可选值:'horizontal', 'vertical'Enum'horizontal'
slidesToShow同时展示的图片数量Number1
slidesToScroll同时滑动到图片数量Number1
speed轮播速度Number500
slickGoTo跳转到指定的轮播图（受控）Number-
afterChange轮播切换后的回调函数签名:Function(index: Number) => void参数:index: {Number} 当前幻灯片的索引Functionnull
beforeChange轮播切换前的回调函数签名:Function(currentIndex: Number, nextIndex: Number) => void参数:currentIndex: {Number} 当前幻灯片的索引nextIndex: {Number} 下一张幻灯片的索引Functionnull

代码示例

导航箭头位置

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

Slider 图片轮播 - 图1

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Slider slidesToShow={4} arrowPos="outer">
  6.       <div style={{ width: "25%" }}>
  7.         <h4 className="h4">1</h4>
  8.       </div>
  9.       <div style={{ width: "25%" }}>
  10.         <h4 className="h4">2</h4>
  11.       </div>
  12.       <div style={{ width: "25%" }}>
  13.         <h4 className="h4">3</h4>
  14.       </div>
  15.       <div style={{ width: "25%" }}>
  16.         <h4 className="h4">4</h4>
  17.       </div>
  18.       <div style={{ width: "25%" }}>
  19.         <h4 className="h4">5</h4>
  20.       </div>
  21.     </Slider>
  23.     <br />
  25.     <Slider>
  26.       <div>
  27.         <h3 className="h3">1</h3>
  28.       </div>
  29.       <div>
  30.         <h3 className="h3">2</h3>
  31.       </div>
  32.       <div>
  33.         <h3 className="h3">3</h3>
  34.       </div>
  35.       <div>
  36.         <h3 className="h3">4</h3>
  37.       </div>
  38.     </Slider>
  39.   </div>,
  40.   mountNode
  41. );
  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 图片轮播 - 图2

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div style={{ width: "600px" }}>
  5.     <Slider
  6.       slidesToShow={4}
  7.       arrowPos="outer"
  8.       dots={false}
  9.       autoplay
  10.       autoplaySpeed={1000}
  11.     >
  12.       <div style={{ width: "25%" }}>
  13.         <h4 className="h4">1</h4>
  14.       </div>
  15.       <div style={{ width: "25%" }}>
  16.         <h4 className="h4">2</h4>
  17.       </div>
  18.       <div style={{ width: "25%" }}>
  19.         <h4 className="h4">3</h4>
  20.       </div>
  21.       <div style={{ width: "25%" }}>
  22.         <h4 className="h4">4</h4>
  23.       </div>
  24.       <div style={{ width: "25%" }}>
  25.         <h4 className="h4">5</h4>
  26.       </div>
  27.       <div style={{ width: "25%" }}>
  28.         <h4 className="h4">6</h4>
  29.       </div>
  30.       <div style={{ width: "25%" }}>
  31.         <h4 className="h4">7</h4>
  32.       </div>
  33.       <div style={{ width: "25%" }}>
  34.         <h4 className="h4">8</h4>
  35.       </div>
  36.       <div style={{ width: "25%" }}>
  37.         <h4 className="h4">9</h4>
  38.       </div>
  39.     </Slider>
  40.   </div>,
  41.   mountNode
  42. );
  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. }

基本

注意： 如果出现图片 1px 高度的问题，建议将图片的外部包括一层 div 来避免这个问题。在默认模式下（不指定任何属性值），轮播组件为单图轮播模式。轮播组件共有两种类型：单图轮播和多图同时轮播。

Slider 图片轮播 - 图3

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const slides = [
  4.   {
  5.     url: "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png",
  6.     text: "手机淘宝皮肤征集"
  7.   },
  8.   {
  9.     url: "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg",
  10.     text: "阿里公益T恤设计大概"
  11.   },
  12.   {
  13.     url: "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg",
  14.     text: "淘公仔设计大赛"
  15.   },
  16.   {
  17.     url: "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg",
  18.     text: "磁带播放器换肤设计大赛"
  19.   }
  20. ];
  22. ReactDOM.render(
  23.   <Slider>
  24.     {slides.map((item, index) => (
  25.       <div key={index} className="slider-img-wrapper">
  26.         <img src={item.url} alt={item.text} />
  27.       </div>
  28.     ))}
  29.   </Slider>,
  30.   mountNode
  31. );
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }

导航按钮尺寸

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

Slider 图片轮播 - 图4

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const bigSlides = [
  4.   {
  5.     url: "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png",
  6.     text: "磁带播放器换肤设计大赛"
  7.   },
  8.   {
  9.     url: "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg",
  10.     text: "手机淘宝皮肤征集"
  11.   },
  12.   {
  13.     url: "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg",
  14.     text: "设计赋能公益"
  15.   },
  16.   {
  17.     url: "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg",
  18.     text: "淘公仔设计大赛"
  19.   }
  20. ];
  22. ReactDOM.render(
  23.   <div>
  24.     <Slider>
  25.       {bigSlides.map((item, index) => (
  26.         <div key={index} className="slider-img-wrapper">
  27.           <img src={item.url} alt={item.text} />
  28.         </div>
  29.       ))}
  30.     </Slider>
  32.     <br />
  34.     <Slider arrowSize="large">
  35.       {bigSlides.map((item, index) => (
  36.         <div key={index} className="slider-img-wrapper">
  37.           <img src={item.url} alt={item.text} />
  38.         </div>
  39.       ))}
  40.     </Slider>
  41.   </div>,
  42.   mountNode
  43. );
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }

居中模式

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

Slider 图片轮播 - 图5

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const settings = {
  4.   className: "custom-slide center",
  5.   centerMode: true,
  6.   infinite: true,
  7.   dots: false,
  8.   arrowPos: "outer",
  9.   centerPadding: "60px",
  10.   slidesToShow: 3,
  11.   speed: 500
  12. };
  14. ReactDOM.render(
  15.   <Slider {...settings}>
  16.     <div>
  17.       <h3>1</h3>
  18.     </div>
  19.     <div>
  20.       <h3>2</h3>
  21.     </div>
  22.     <div>
  23.       <h3>3</h3>
  24.     </div>
  25.     <div>
  26.       <h3>4</h3>
  27.     </div>
  28.     <div>
  29.       <h3>5</h3>
  30.     </div>
  31.     <div>
  32.       <h3>6</h3>
  33.     </div>
  34.     <div>
  35.       <h3>7</h3>
  36.     </div>
  37.     <div>
  38.       <h3>8</h3>
  39.     </div>
  40.     <div>
  41.       <h3>9</h3>
  42.     </div>
  43.   </Slider>,
  44.   mountNode
  45. );
  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. }

自定义导航箭头

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

Slider 图片轮播 - 图6

查看源码在线预览

  1. import { Slider, Icon } from "@icedesign/base";
  3. const slides = [
  4.   {
  5.     url: "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png",
  6.     text: "手机淘宝皮肤征集"
  7.   },
  8.   {
  9.     url: "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg",
  10.     text: "阿里公益T恤设计大概"
  11.   },
  12.   {
  13.     url: "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg",
  14.     text: "淘公仔设计大赛"
  15.   },
  16.   {
  17.     url: "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg",
  18.     text: "磁带播放器换肤设计大赛"
  19.   }
  20. ];
  22. const arrowStyle = {
  23.   display: "block",
  24.   background: "red",
  25.   opacity: 1,
  26.   margin: "0 20px"
  27. };
  29. const CustomNextArrow = props => {
  30.   return (
  31.     <div {...props} style={arrowStyle}>
  32.       <Icon type="arrow-double-right" />
  33.     </div>
  34.   );
  35. };
  37. const CustomPrevArrow = props => {
  38.   return (
  39.     <div {...props} style={arrowStyle}>
  40.       <Icon type="arrow-double-left" />
  41.     </div>
  42.   );
  43. };
  45. ReactDOM.render(
  46.   <Slider
  47.     nextArrow={<CustomNextArrow />}
  48.     prevArrow={<CustomPrevArrow />}
  49.     lazyLoad
  50.   >
  51.     {slides.map((item, index) => (
  52.       <div key={index} className="slider-img-wrapper">
  53.         <img src={item.url} alt={item.text} />
  54.       </div>
  55.     ))}
  56.   </Slider>,
  57.   mountNode
  58. );
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }

使用自定义组件

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

Slider 图片轮播 - 图7

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  2. import PropTypes from "prop-types";
  4. const pages = [1, 2, 3, 4];
  6. function Inner({ children, ...others }) {
  7.   // 注意这里要透传其他属性到到下层节点上，Slider 底层需要执行元素的 clone 操作
  8.   return <div {...others}>{children}</div>;
  9. }
  11. Inner.propTypes = {
  12.   children: PropTypes.any
  13. };
  15. const slider = (
  16.   <Slider>
  17.     {pages.map((page, index) => {
  18.       return (
  19.         <Inner className="custom-inner" key={index}>
  20.           custom {page}
  21.         </Inner>
  22.       );
  23.     })}
  24.   </Slider>
  25. );
  27. ReactDOM.render(<div>{slider}</div>, 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. }

导航锚点方向

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

Slider 图片轮播 - 图8

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Slider dotsDirection="horizontal" arrows={false}>
  6.       <div>
  7.         <h3 className="h3">1</h3>
  8.       </div>
  9.       <div>
  10.         <h3 className="h3">2</h3>
  11.       </div>
  12.       <div>
  13.         <h3 className="h3">3</h3>
  14.       </div>
  15.       <div>
  16.         <h3 className="h3">4</h3>
  17.       </div>
  18.     </Slider>
  20.     <br />
  22.     <Slider dotsDirection="vertical" arrows={false}>
  23.       <div>
  24.         <h3 className="h3">1</h3>
  25.       </div>
  26.       <div>
  27.         <h3 className="h3">2</h3>
  28.       </div>
  29.       <div>
  30.         <h3 className="h3">3</h3>
  31.       </div>
  32.       <div>
  33.         <h3 className="h3">4</h3>
  34.       </div>
  35.     </Slider>
  36.   </div>,
  37.   mountNode
  38. );
  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. }

Fade

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

Slider 图片轮播 - 图9

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const settings = {
  4.   arrowPos: "outer",
  5.   dots: false,
  6.   fade: true,
  7.   infinite: true,
  8.   speed: 500,
  9.   slidesToShow: 1,
  10.   slidesToScroll: 1,
  11.   className: "custom-slide"
  12. };
  14. ReactDOM.render(
  15.   <Slider {...settings}>
  16.     <div>
  17.       <h3>1</h3>
  18.     </div>
  19.     <div>
  20.       <h3>2</h3>
  21.     </div>
  22.     <div>
  23.       <h3>3</h3>
  24.     </div>
  25.     <div>
  26.       <h3>4</h3>
  27.     </div>
  28.     <div>
  29.       <h3>5</h3>
  30.     </div>
  31.     <div>
  32.       <h3>6</h3>
  33.     </div>
  34.     <div>
  35.       <h3>7</h3>
  36.     </div>
  37.     <div>
  38.       <h3>8</h3>
  39.     </div>
  40.     <div>
  41.       <h3>9</h3>
  42.     </div>
  43.   </Slider>,
  44.   mountNode
  45. );
  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. }

禁止循环

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

Slider 图片轮播 - 图10

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div>
  5.     <Slider slidesToShow={4} arrowPos="outer" infinite={false} dots={false}>
  6.       <div style={{ width: "25%" }}>
  7.         <h4 className="h4">1</h4>
  8.       </div>
  9.       <div style={{ width: "25%" }}>
  10.         <h4 className="h4">2</h4>
  11.       </div>
  12.       <div style={{ width: "25%" }}>
  13.         <h4 className="h4">3</h4>
  14.       </div>
  15.       <div style={{ width: "25%" }}>
  16.         <h4 className="h4">4</h4>
  17.       </div>
  18.       <div style={{ width: "25%" }}>
  19.         <h4 className="h4">5</h4>
  20.       </div>
  21.     </Slider>
  23.     <br />
  25.     <Slider infinite={false}>
  26.       <div>
  27.         <h3 className="h3">1</h3>
  28.       </div>
  29.       <div>
  30.         <h3 className="h3">2</h3>
  31.       </div>
  32.       <div>
  33.         <h3 className="h3">3</h3>
  34.       </div>
  35.       <div>
  36.         <h3 className="h3">4</h3>
  37.       </div>
  38.     </Slider>
  39.   </div>,
  40.   mountNode
  41. );
  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. }

多图轮播

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

Slider 图片轮播 - 图11

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => (
  4.   <div style={{ width: "25%" }} key={item}>
  5.     <h4 className="h4">1</h4>
  6.   </div>
  7. ));
  9. ReactDOM.render(
  10.   <div style={{ width: "600px" }}>
  11.     <div className="demo-item-title">一次轮播一张图片</div>
  12.     <Slider slidesToShow={4} arrowPos="outer" dots={false}>
  13.       {slides}
  14.     </Slider>
  16.     <div className="demo-item-title">一次轮播多张图片</div>
  17.     <Slider slidesToShow={4} slidesToScroll={4} arrowPos="outer" dots={false}>
  18.       {slides}
  19.     </Slider>
  20.   </div>,
  21.   mountNode
  22. );
  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. }

悬浮时暂停

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

Slider 图片轮播 - 图12

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const settings = {
  4.   className: "custom-slide",
  5.   arrowPos: "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>
  18.       <h3>1</h3>
  19.     </div>
  20.     <div>
  21.       <h3>2</h3>
  22.     </div>
  23.     <div>
  24.       <h3>3</h3>
  25.     </div>
  26.     <div>
  27.       <h3>4</h3>
  28.     </div>
  29.     <div>
  30.       <h3>5</h3>
  31.     </div>
  32.     <div>
  33.       <h3>6</h3>
  34.     </div>
  35.     <div>
  36.       <h3>7</h3>
  37.     </div>
  38.     <div>
  39.       <h3>8</h3>
  40.     </div>
  41.     <div>
  42.       <h3>9</h3>
  43.     </div>
  44.   </Slider>,
  45.   mountNode
  46. );
  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. }

slickGoTo

通过 slickGoTo 方法可以快速的定位到指定次序的 slider 。

Slider 图片轮播 - 图13

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const slides = [
  4.   {
  5.     url: "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png",
  6.     text: "磁带播放器换肤设计大赛"
  7.   },
  8.   {
  9.     url: "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg",
  10.     text: "手机淘宝皮肤征集"
  11.   },
  12.   {
  13.     url: "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg",
  14.     text: "设计赋能公益"
  15.   },
  16.   {
  17.     url: "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg",
  18.     text: "淘公仔设计大赛"
  19.   }
  20. ];
  22. class SlickGoTo extends React.Component {
  23.   constructor(props) {
  24.     super(props);
  25.     this.state = {
  26.       currentSlide: 0 // 这里初始值需要置为 0，如果你希望初始值不为 0 ，可以使用 initialSlide 属性设置
  27.     };
  28.     this.changeHandler = this.changeHandler.bind(this);
  29.   }
  30.   changeHandler(e) {
  31.     this.setState({
  32.       currentSlide: parseInt(e.target.value)
  33.     });
  34.   }
  35.   render() {
  36.     const settings = {
  37.       dots: false,
  38.       infinite: true,
  39.       slickGoTo: this.state.currentSlide
  40.     };
  41.     return (
  42.       <div>
  43.         <div className="demo-item-title">拉动下面的滚动条切换</div>
  44.         <input
  45.           onChange={this.changeHandler}
  46.           defaultValue={0}
  47.           type="range"
  48.           min={0}
  49.           max={3}
  50.         />
  51.         <Slider {...settings}>
  52.           {slides.map((item, index) => (
  53.             <div key={index} className="slider-img-wrapper">
  54.               <img src={item.url} alt={item.text} />
  55.             </div>
  56.           ))}
  57.         </Slider>
  58.       </div>
  59.     );
  60.   }
  61. }
  63. 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. }

beforeChange 和 afterChange 钩子

你可以利用 beforeChange 和 afterChange 两个钩子函数处理一些额外的逻辑。

Slider 图片轮播 - 图14

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const settings = {
  4.   className: "custom-slide",
  5.   arrowPos: "outer",
  6.   dots: false,
  7.   infinite: true,
  8.   speed: 500,
  9.   slidesToShow: 1,
  10.   slidesToScroll: 1,
  11.   beforeChange: function(currentSlide, nextSlide) {
  12.     console.log("before change", currentSlide, nextSlide);
  13.   },
  14.   afterChange: function(currentSlide) {
  15.     console.log("after change", currentSlide);
  16.   }
  17. };
  19. ReactDOM.render(
  20.   <Slider {...settings}>
  21.     <div>
  22.       <h3>1</h3>
  23.     </div>
  24.     <div>
  25.       <h3>2</h3>
  26.     </div>
  27.     <div>
  28.       <h3>3</h3>
  29.     </div>
  30.     <div>
  31.       <h3>4</h3>
  32.     </div>
  33.     <div>
  34.       <h3>5</h3>
  35.     </div>
  36.     <div>
  37.       <h3>6</h3>
  38.     </div>
  39.     <div>
  40.       <h3>7</h3>
  41.     </div>
  42.     <div>
  43.       <h3>8</h3>
  44.     </div>
  45.     <div>
  46.       <h3>9</h3>
  47.     </div>
  48.   </Slider>,
  49.   mountNode
  50. );
  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. }

垂直滑动

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

Slider 图片轮播 - 图15

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. ReactDOM.render(
  4.   <div style={{ width: "200px" }}>
  5.     <div className="demo-item-title">垂直多图模式</div>
  6.     <Slider
  7.       slideDirection="vertical"
  8.       slidesToShow={3}
  9.       slidesToScroll={1}
  10.       dots={false}
  11.       arrowPos="inline"
  12.       arrowDirection="vertical"
  13.       className="vertical-slick"
  14.     >
  15.       {[1, 2, 3, 4, 5].map((item, index) => (
  16.         <div
  17.           key={index}
  18.           className="custom-slider"
  19.           style={{ border: "1px solid transparent" }}
  20.         >
  21.           <h3 className="h3">{item}</h3>
  22.         </div>
  23.       ))}
  24.     </Slider>
  26.     <div className="demo-item-title">垂直单图模式</div>
  27.     <Slider
  28.       slideDirection="vertical"
  29.       dots={false}
  30.       arrowPos="inline"
  31.       arrowDirection="vertical"
  32.       className="vertical-slick"
  33.     >
  34.       {[1, 2, 3, 4, 5].map((item, index) => (
  35.         <div key={index} className="custom-slider">
  36.           <h3 className="h3">{item}</h3>
  37.         </div>
  38.       ))}
  39.     </Slider>
  40.   </div>,
  41.   mountNode
  42. );
  1. .vertical-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. }

弹出来的跑马灯

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

Slider 图片轮播 - 图16

查看源码在线预览

  1. import { Slider, Dialog, Button } from "@icedesign/base";
  2. import PropTypes from "prop-types";
  4. const slides = [
  5.   {
  6.     url: "https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png",
  7.     text: "磁带播放器换肤设计大赛"
  8.   },
  9.   {
  10.     url: "https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg",
  11.     text: "手机淘宝皮肤征集"
  12.   },
  13.   {
  14.     url: "https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg",
  15.     text: "设计赋能公益"
  16.   },
  17.   {
  18.     url: "https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg",
  19.     text: "淘公仔设计大赛"
  20.   }
  21. ];
  23. const dialogStyle = {
  24.   width: "800px"
  25. };
  27. class FlappySlider extends React.Component {
  28.   static propTypes = {
  29.     slides: PropTypes.array
  30.   };
  32.   constructor(props) {
  33.     super(props);
  34.     this.state = {
  35.       visible: false
  36.     };
  37.   }
  39.   setVisible() {
  40.     this.setState(prevState => {
  41.       return {
  42.         visible: !prevState.visible
  43.       };
  44.     });
  45.   }
  47.   render() {
  48.     return (
  49.       <div className="demo-wrapper">
  50.         <Button type="primary" onClick={this.setVisible.bind(this)}>
  51.           显示跑马灯
  52.         </Button>
  53.         <Dialog
  54.           visible={this.state.visible}
  55.           title="Alibaba.com"
  56.           footer={false}
  57.           style={dialogStyle}
  58.           animation={false}
  59.           onClose={this.setVisible.bind(this)}
  60.         >
  61.           <Slider>
  62.             {this.props.slides.map((item, index) => (
  63.               <div key={index} className="slider-img-wrapper">
  64.                 <img key={index} src={item.url} alt={item.text} />
  65.               </div>
  66.             ))}
  67.           </Slider>
  68.         </Dialog>
  69.       </div>
  70.     );
  71.   }
  72. }
  74. ReactDOM.render(<FlappySlider slides={slides} />, mountNode);
  1. .slider-img-wrapper img {
  2.     width: 100%;
  3. }

外部控制

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

Slider 图片轮播 - 图17

查看源码在线预览

  1. import { Slider, Select } from "@icedesign/base";
  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 (
  24.       <div>
  25.         <Select
  26.           placeholder="自动播放"
  27.           onChange={this.onSelectAutoplay.bind(this)}
  28.         >
  29.           <Option value>True</Option>
  30.           <Option value={false}>False</Option>
  31.         </Select>
  32.         &nbsp;&nbsp;
  33.         <Select
  34.           placeholder="轮播速度"
  35.           onChange={this.onSelectAutoplaySpeed.bind(this)}
  36.         >
  37.           <Option value={1000}>1 second</Option>
  38.           <Option value={2000}>2 seconds</Option>
  39.           <Option value={3000}>3 seconds</Option>
  40.         </Select>
  41.         <br />
  42.         <br />
  43.         <Slider
  44.           autoplay={this.state.autoplay}
  45.           autoplaySpeed={this.state.autoplaySpeed}
  46.         >
  47.           <div>
  48.             <h3 className="h3">1</h3>
  49.           </div>
  50.           <div>
  51.             <h3 className="h3">2</h3>
  52.           </div>
  53.           <div>
  54.             <h3 className="h3">3</h3>
  55.           </div>
  56.           <div>
  57.             <h3 className="h3">4</h3>
  58.           </div>
  59.         </Slider>
  60.       </div>
  61.     );
  62.   }
  63. }
  65. 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. }

不同的图片宽度

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

Slider 图片轮播 - 图18

查看源码在线预览

  1. import { Slider } from "@icedesign/base";
  3. const settings = {
  4.   className: "custom-slide variable-width",
  5.   arrowPos: "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 }}>
  16.       <p>100</p>
  17.     </div>
  18.     <div style={{ width: 200 }}>
  19.       <p>200</p>
  20.     </div>
  21.     <div style={{ width: 75 }}>
  22.       <p>75</p>
  23.     </div>
  24.     <div style={{ width: 300 }}>
  25.       <p>300</p>
  26.     </div>
  27.     <div style={{ width: 225 }}>
  28.       <p>225</p>
  29.     </div>
  30.     <div style={{ width: 175 }}>
  31.       <p>175</p>
  32.     </div>
  33.   </Slider>,
  34.   mountNode
  35. );
  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 图片轮播 - 图19

暂无相关区块