【设计+切版30天实作】｜Day25 - Carousel区块 - 把Carousel Caption和Indicators改成心目中理想的模样

前面完成了「Steps」区块，今天来完成「Carousel」的区块。

数据收集

margin-top : 96px

Carousel底下Background的height：468px

Carousel底下Background的Background-color：Primary,16% → RGB(155,60,5,0.16)

Carousel底下Background的margin-top : 176px

Carousel的height : 628px

Carousel-Caption 标题的样式

• Font-weight：Bold
• Font-size：56px
• Text-color：$Secondary

Carousel-Caption 小标的样式

• Font-weight：Normal
• Font-size：32px
• Text-color：$Secondary

Carousel-Indicators的样式

• Width：16px
• Height：16px
• Margin：24px

步骤

先开一个新区块

1. 开啓<section>
2. 在section里新增style，用於设定背景横条
3. 在style里新增height、background-color、margin
4. 由於carousel会垂直水平置中在背景上，所以再新增d-flex 、align-items-center的class

<section class="d-flex align-items-center" style="height:468px; background-color: rgba(155,60,5,0.16); margin: 176px 0px;">

新增.container，以确保carousel在container里面

<section class="d-flex align-items-center" style="height:468px; background-color: rgba(155,60,5,0.16); margin: 176px 0px;">
	<div class="container">
	</div>
</section>

去Bootstrap官网复制Carousel的html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
 
<!-- 下面三个指标小icon -->
 <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

  <div class="carousel-inner">

		<!-- Carousel-1 -->
    <div class="carousel-item active">
			<!-- 图片/照片 1 -->
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
				<!-- 字幕 1 -->
				<h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>

		<!-- Carousel-2 -->
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>

		<!-- Carousel-3 -->
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>

  </div>

	<!-- 左箭头btn -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>

	<!-- 右箭头btn -->
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

</div>

在carousel最外层的div加入style，并新增z-index:9999，让它在最上层

<div style="z-index: 9999;" id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">

在carousel里面新增照片及字幕，并客制其样式

<!-- Carousel-1 -->
<div class="carousel-item active">

  <!-- 图片/照片 1 -->
  <img src="style/PHOTO/carousel_1.png" class="d-block w-100" alt="...">
  <div class="carousel-caption d-none d-md-block">
   
		 <!-- 字幕 1 -->
    <h5 class="display-4 fw-bold">弹性自由</h5>
    <p class="fs-2 fw-light">随时随地，预约上课</p>

  </div>
</div>

由於设计稿并没有左右箭头，所以删掉左右箭头的btn

<div style="z-index: 9999;"id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">

  <!-- 下面三个指标小icon -->
  <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

  <div class="carousel-inner">
      <!-- Carousel-1 -->
      <div class="carousel-item active">
          <!-- 图片/照片 1 -->
          <img src="style/PHOTO/carousel_1.png" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
              <!-- 字幕 1 -->
              <h5 class="display-4 fw-bold">弹性自由</h5>
              <p class="fs-2 fw-light">随时随地，预约上课</p>
          </div>
      </div>
      <!-- Carousel-2 -->
      <div class="carousel-item">
          <img src="style/PHOTO/carousel_2.png" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
              <h5 class="display-4 fw-bold">无拘无束</h5>
              <p class="fs-2 fw-light">随时随地，追求梦想</p>
          </div>
      </div>
      <!-- Carousel-3 -->
      <div class="carousel-item">
          <img src="style/PHOTO/carousel_3.png" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
              <h5 class="display-4 fw-bold">突破极限</h5>
              <p class="fs-2 fw-light">随时随地，挑战自我</p>
          </div>
      </div>

  </div>    
</div>

修改下方的indicators

1. 原本的indicators是长条形，所以我们要把它改成设计稿的圆形
2. 去_variables.scss修改 indicator的宽 $carousel-indicator-width ，设为16px
3. 去_variables.scss修改indicator的高 $carousel-indicator-height ，设为16px
4. 去_variables.scss修改indicator们的间距 $carousel-indicator-spacer，设为12px

＊ 设计稿的间距为24px，但因为这里是指每一颗圆点的间距，因此这里会把24px除以2，设为12px喔！

```scss
$carousel-indicator-width:  16px; //30px !default;
$carousel-indicator-height: 16px; //3px !default;
$carousel-indicator-spacer: 12px; //3px !default;
```

5. 回去html，在carousel-indicators里的button加入style，让border-radius=100%，这样就会变成圆形啦

```html
<div class="carousel-indicators" >
  <button style="border-radius: 100%;" type="button" data-bs-target="#carouselCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button style="border-radius: 100%;" type="button" data-bs-target="#carouselCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button style="border-radius: 100%;" type="button" data-bs-target="#carouselCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
```

6. 最後因为margin-bottom是40px，所以在carousel-indicators後方加入mb-8

   <div class="carousel-indicators mb-8" >
     <button style="border-radius: 100%;" type="button" data-bs-target="#carouselCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
     <button style="border-radius: 100%;" type="button" data-bs-target="#carouselCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
     <button style="border-radius: 100%;" type="button" data-bs-target="#carouselCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
   </div>
   

7. 酱酱，目前会变成下面这个样子XD（因为还没处理字幕的部分）

预设的字幕是在下方，所以要把它弄成垂直置中

1. 去原本BS5档案里就有的_carousel.scss里，找出.carousel-caption

2. 新增top、transform的和bottom的样式

3. 最後，删除原本的bottom样式，就完成了
   （＊上为修改前，下为修改後）

   .carousel-caption {
     position: absolute;
     right: (100% - $carousel-caption-width) / 2;
     bottom: $carousel-caption-spacer;
     left: (100% - $carousel-caption-width) / 2;
     padding-top: $carousel-caption-padding-y;
     padding-bottom: $carousel-caption-padding-y;
     color: $carousel-caption-color;
     text-align: center;
   }
   

   .carousel-caption {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     bottom: initial;
     right: (100% - $carousel-caption-width) / 2;
     //bottom: $carousel-caption-spacer;
     left: (100% - $carousel-caption-width) / 2;
     padding-top: $carousel-caption-padding-y;
     padding-bottom: $carousel-caption-padding-y;
     color: $carousel-caption-color;
     text-align: center;
   }
   

4. 这样就会垂直置中啦！是不是很快XDXD（查了快两三个小时的成果-v-终於出生了）

登登登登，轮播三张照片的Carousel区块就完成啦！明天继续来切下一个区块吧 (๑´ㅂ`๑)