在设计 hero 区域的时候，我们在页面上引用了 slick 这个东西，它可以去把一组项目转换成一个旋转木马 ..

下面我们可以去配置一下，让故事区里的这两个元素变成旋转木马显示出来 ... 而且我们要设置这两个旋转木马之间的关系 ..

打开项目使用的脚本文件 ... 在 app .. scripts 下面 .. 打开 main.js ..

浏览器到设置 slick carousel 的地方 ...

先找到页面上要使用旋转木马的元素 ... .ui.vertical.story 下面的 .ui.carousel.for ... 应用一下 slick 方法 ..

再设置一下另一个旋转木马元素 ... .ui.vertical.story 下面的 .ui.carousel.nav ... 也样使用一上 slick 方法 ..

这样这两个东西都会变成一个旋转木马组件 .. 我们需要再去配置一下它们 ..

给这个 slick 方法一个对象参数 ... 上面这个文字项目的旋转木马 ... 不需要控制按钮 .. 把它的 arrows 设置成 false ..

slidesToShow 这个配置选项设置的是每次显示的项目的数量 .. 这里设置成 1 ...

再配置一下，下面这个图像旋转木马 .. slidesToShow 设置成 3，显示三个项目 ... 这里我们可以用一下导航点，把 dots 设置成 true ..

再配置一下它的控制按钮 .. 可以复制一下配置 hero 区域的旋转木马里的配置 ..

就是这个 prevArrow ，还有 nextArrow ... 去掉按钮上的 bottom 类，这样这两个控制按钮会居中显示 ..

然后把 centerMode 设置成 true .. 这样第一个项目就会是三个项目里面的中间那个 ..

再添加一个 responsive ... 配置一下小尺寸设备的旋转木马的一些行为 .. 它的值是一个数组 .. 每个配置都是一个对象 .. 里面添加一个 breakpoint ，值是 767 ...

相关的配置放在 settings 里面 .. 添加一个 slidesToshow ... 值可以是 1 ..

这样这组图像旋转木马在宽度小于 767 以下的窗口上显示的时候，只会显示其中的一个项目 ...

这里我们还需要设置一下这两个旋转木马之间的关系 ... 在这组图片旋转木马的配置里面，添加一个 asNavFor ... 它的值就是上面的文字旋转木马 ..

.ui.vertical.story .ui.carousel.for

同样再配置一下上面的这个文字旋转木马 ... asNavFor ，它的值是下面的这个图像旋转木马 ..

.ui.vertical.story .ui.carousel.nav

再去预览一下 ...

滚动文字旋转木马 .. 下面的图像旋转木马也会跟着动 ...

滚动图像旋转木马 .. 上面的文字也会随着变化 ... 因为我们配置了它们之间的关系 ... 一个文字，对应一个图片 ...

在滚动文字的时候，会有个边框的样式，可以去掉它 ... 在 story 样式里面 ... 每个旋转木马项目都用了一个带 item 类的包装 .. 设置一下这个 item 的样式 .. 把它的 outline 设置成 none ;

这样在滚动文字的时候就不会再显示那个蓝色的框框了 ..