.slider {
  position: relative; // 設定定位的基準點
  &--item {
    position: absolute; // 讓所有的照片都先疊在一起
    width: 100%;
    text-align: center;
    img {
      width: 100%;
      max-width: 100%;
      max-height: 100%; // 這邊一定要設定圖片的最大寬度和高度，可以達到 rwd 的效果
    }
    &:not(:first-child) {
      opacity: 0; // 因為我們的動畫有加上淡入淡出，所以其他還沒出場的人請先都隱藏，不然淡出之後就會發現後面還有一張照片
    }
  }
  &--controls {
    a {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      display: inline-block;
      padding: 20px;
      background-color: rgba(#f75857, 0.8);
      color: white;
      transition: 0.4s;
      &:hover {
        background-color: rgba(#f75857, 1);
      }
    }
    &--left {
      left: 0;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    &--right {
      right: 0;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }
}

@keyframes showRight {
  0% {
    left: 100%;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes hideRight {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}

@keyframes showLeft {
  0% {
    left: -100%;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
@keyframes hideLeft {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}