Slider 图片轮播

Slider 图片轮播

Guide

何时使用

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

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

使用注意点

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

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

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

Amoy Doll Design Competition
Tape Player Skin Design Competition
Mobile Phone Taobao Skin Call
Design Enabling Public Welfare
Amoy Doll Design Competition
Tape Player Skin Design Competition

基本

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

slide one picture one at a time

9

1

2

3

4

5

9

1

2

3

4

slide multiple picture one at a time

9

1

2

3

4

5

9

1

2

3

4

多图轮播

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

Vertical multi-picture mode

3

4

5

1

2

3

4

5

1

2

3

Vertical single-picture mode

5

1

2

3

4

5

1

垂直滑动

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

Amoy Doll Design Competition
Tape Player Skin Design Competition
Mobile Phone Taobao Skin Call
Design Enabling Public Welfare
Amoy Doll Design Competition
Tape Player Skin Design Competition

Amoy Doll Design Competition
Tape Player Skin Design Competition
Mobile Phone Taobao Skin Call
Design Enabling Public Welfare
Amoy Doll Design Competition
Tape Player Skin Design Competition

导航按钮尺寸

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

4

1

2

3

4

1


4

1

2

3

4

1

导航锚点方向

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

4

1

2

3

4

1


4

1

2

3

4

1

导航锚点触发方式

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

4

0

1

2

3

4

0

自定义导航锚点

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

Amoy Doll Design Competition
Tape Player Skin Design Competition
Mobile Phone Taobao Skin Call
Amoy Doll Design Competition
Tape Player Skin Design Competition

自定义导航箭头

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

2

3

4

5

1

2

3

4

5

1

2

3

4


4

1

2

3

4

1

导航箭头位置

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

9

1

2

3

4

5

9

1

2

3

4


3

1

2

3

1

自动播放

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

1

2

3

4

5


1

2

4

禁止循环

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

7

8

9

1

2

3

4

5

6

7

8

9

1

2

3

悬浮时暂停

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

  

4

1

2

3

4

1

外部控制

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

7

8

9

1

2

3

4

5

6

7

8

9

1

2

3

居中模式

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

Pull the scroll bar to switch:
Amoy Doll Design Competition
Tape Player Skin Design Competition
Mobile Phone Taobao Skin Call
Design Enabling Public Welfare
Amoy Doll Design Competition
Tape Player Skin Design Competition

ActiveIndex

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

225

175

100

200

75

300

225

175

100

200

不同的图片宽度

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

custom 4
custom 1
custom 2
custom 3
custom 4
custom 1

使用自定义组件

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

弹出来的跑马灯

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

1

Fade

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

9

1

2

3

4

5

6

7

8

9

1

onChange 钩子

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

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'
dotsRender自定义导航锚点

签名:
Function() => void
Function-
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