[Angular实战网易云]——5、获取轮播图(二)

组件封装

在home路径下新建component文件夹，在component文件夹下新建wy-carousel。这一层是用来封装轮播图两侧及底部动作实现的组件。

carousel.component.less

.carousel {
   
  padding: 10px 0;
  background-color: #001529;
  .wrap {
   
    position: relative;
    .dot {
   
      display: block;
      width: 20px;
      height: 20px;
      overflow: hidden;
      background: url("./banner.png") 3px -343px;
      cursor: pointer;
      &.active {
   
        background-position: -16px -343px;
      }
    }
    .arrow {
   
      display: block;
      position: absolute;
      width: 37px;
      top: 50%;
      margin-top: -20px;
      color: #fff;
      font-size: 40px;
      cursor: pointer;
      &.left {
   
        left: -68px;
      }
      &.right {
   
        right: -68px;
      }
    }
  }
}

carousel.component.html

<div class="carousel">
  <div class="wrap">
  <!--左侧箭头，用来切换轮播图-->
    <i