【设计+切版30天实作】｜Day9 - 把Bootstrap预设的Carousel新增变化

设计大纲

一个平台要成功，当然少不了图片/照片的介绍（很爱看图的懒人XD），所以接下来要设计一个区块 —— 专门轮播「使用平台的过程照片」。
Bootstrap 5 本身是有carousel这个元件可以提供切版使用的，所以这边就会参考它的设计唷！
（下方附上Bootstrap 5 的carousel）

但由於它的设计不一定符合每个人的口味（对，就是不太符合我的口味-v-），所以这边会帮它做点小变化。这次会让carousel不是满版，但因为怕太单调，所以在背後加一条长方形作为小装饰！

步骤

背景条

1. 在画布上画出一条「满版宽」的长方形，高度先随便拉个480px（之後再微调）
2. 颜色调整为Primary（#9B3C05）＋透明度16%

carousel的图片

1. 把carousel所需的图片，直接拉进来
2. 大小拉到与container同宽
3. 高度这边就不特别去改了，因为目前的图片都是一样 14:9 的比例，到时候切版直接下w-100就可以了
4. 与底下的背景条是维持垂直置中
5. 再与上方区块维持96px

再度微调背景条高度

1. 背景条与上方的间距是170px，但因为非8的倍数，所以把背景条的高度调整为468px
2. 这时候背景条与上方区块间距为176px、与carousel图片的间距为80px
3. 以上为完美的数字 ~v~

carousel的字幕

1. 在照片正中央输入字幕标题文案
2. 调整文字大小为56px (display-4的大小)、font-weight为Bold、颜色为secondary-color(#FDFCFC)
   
3. 在标题下一行输入小标题文案
4. 调整文字大小为32px (h2的大小)、font-weight为normal、颜色为secondary-color(#FDFCFC)
   
5. 因为不想跟Bootstrap一样在图片的下方，所以这边会把标题和小标群组起来，再来放在水平及垂直的置中位置

carousel的btn

1. 这边因为不会跟Bootstrap一样有左右的按钮，所以就不会画出来喔
2. 另外，原本Bootstrap下方的三条按钮，这边会改成以「三个圆点」来呈现
3. 在下方画出一个圆形，并调整大小为16px、颜色为white(#FFFFFF)
   
4. 再另外复制两个出来
5. 把排第一的圆点颜色调整为text(#707070)
   
6. 调整彼此间距为24px，margin-bottom为40px，这样就完成了！
   

结论

这个区块是不是其实不难～～～ 把原本预设的carousel改成自己想要的样子，再把数值改成完美的8倍数，就可以完成了！虽然目前看起来改设计好像蛮简单，但这边还是要提醒一下大家，在切版时，毕竟有改到预设值的元件，所以到时候切版就会比较复杂了（详情见後面切版实作）。不过，我觉得是值得的哈哈哈哈，因为这样才会有独一无二的设计?！！！
那明天再来设计下一个区块吧！