外观这块内容我打算用旋转木马的形式来表示，在我们的项目里用了一个叫 slick 的东西，它提供了旋转木马功能，我们只需要配置一下就可以把内容转换成旋转木马 ..

在之前添加的外观内容的包装的上面，可以先添加一个 id ... exterior-design ... 因为页面上的元素的 id 是唯一的，所以我们在自定义的脚本里，可以使用这个 id 准确的定位到这个元素 ..

打开 app .. scripts 下面的 main.js ... 找到配置旋转木马的地方 ...

复制一下这块配置 .. 然后再修改一下 .. 元素是 #exterior-design 下面的 .carousel.text ，就是外观区域上的文字内容 ..

asNavFor ，可以设置一下对应的旋转木马元素，这样滚动这个旋转木马的同时，也会滚动在这里指定的旋转木马 .. 这里就是外观内容上的图像 .. 把图像项目的包装元素放到这个 asNavfor 这个属性里面 .. #exterior-design .carousel.image

arrows 设置成 false，slidesToShow 设置成 1 个 ..

然后再复制一下这块配置 .. 修改一下，元素是 #exterior-design 下面的 .carousel.image .. asNavFor 设置成 #exterior-design .carousel.text ..

每次显示两个项目，slidesToShow 设置成 2 .. 不使用 centerMode ..

保存，再去预览一下 .. 滚动文字 ... 下面的图像也会跟着动 ... 滚动图像 ... 上面的文字也会随着变化 ..

再给这块区域添加点样式 .. 打开 app .. styles 下面的 _story.scss

找到 .vertical 区域 ..

先把 .header 的上边的外边距设置成 0 .. 因为它上面是一个子标题，我不想让子标题跟大标题之间距离太大 ..

下面再添加一个 .sub.header ，设置一下文字里的子标题的样式 ..

font-size ，字号设置成 14px， 下边添加一个 8 像素的外边距 .. margin-bottom 设置成 8 像素，再添加点字间距 .. letter-spacing 设置成 3px ..

color ，设置一下文字的颜色 .. rgba(0, 0, 0, 0.5)

现在，我们就完成了产品页上的外观区域 ...