这个旋转木马的有些配置我希望在特定宽度范围的窗口上使用 .. 找到自定义脚本使用了 slick 方法的地方 ..

这些响应式的东西，可以放在一个 responsive 属性里面 ... 它的值是一个数组 ... 数组里的每个项目都是一个对象 ..

这个对象要包含一个 breakpoint .. 还有一个对应的配置对象 ..

先添加一个 breakpoint .. 比如我希望有些配置可以在宽度是 767 像素以下的设备上使用 .. 这个 breakpoint 的值可以设置成 767 .

再添加一个 settings ... 它的值又是一个对象 ... 里面可以包含特定的配置 .. 比如我想在 767 以下宽度的设备上使用一组导航点 ... 这个配置的名字是 dots ，默认它的值是 false ，在 767 这个 breakpoint 里面，可以把 dots 的值设置成 true ..

你可以在这个 responsive 里面，去添加其它的对象，每个对象都可以设置一个断点的值，还有一个特定的配置.. 这些配置都会在你设置的断点上使用 ..

再去预览一下 ..

现在这个旋转木马上面没有显示导航点 ..

改变一下窗口的尺寸 ...

767 是我们设置的一个断点 .. 在 767 以下 ... 你会发现这个旋转木马会出现一组导航点 ..

查看一下这组导航点 .. 检查一下它的样式 ..

这组导航点的包装用了绝对定位 ... 它的 bottom 的值是一个负数 ... 我们可以覆盖一下这个样式 .. 这个包装上有个类是 .slick-dots

回到 carousel .. 添加一个 .slick-dots .. 把它的 bottom 的值设置成 32px ..

再调整一下这个英雄区的样式 .. 在这个按钮的下面可以添加点下边距 ..

打开这个 hero.scss .. 按钮的大包装的上面有个 action 类 ... 用它作为样式的选择器 ... 添加一个 margin-bottom .. 值可以是 32px ..

再去预览一下这个旋转木马的英雄区 ...