div.carousel
  div.viewport
    // 生成5个轮播卡片
    -for(let i1 = 1; i1 < 6; i1++)
      div.slide(id=`slide-${i1}`)= i1
        // 前进后退按钮
        a.action-prev(href=`#slide-${i1 == 1 ? 5 : i1 - 1}`)
        a.action-next(href=`#slide-${i1 < 5 ? i1 + 1 : 1}`)
  div.dots 
    // 生成5个控制点
    -for(let i2 = 1; i2 < 6; i2++)
      a(href=`#slide-${i2}`)

.carousel 
  width 560px
  text-align center
  position relative
  box-shadow 0 0 10px rgba(black,.3)
  // 前进后退按钮
  &:before,&:after
    content ''
    width 64px
    height @width
    background #333 url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat
    border-radius 50%
    display block
    position absolute
    top 50%
    left -16px
    z-index 10
    pointer-events none
    transform translateY(-50%)
  &:after
    right -16px
    left auto
    background-image url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E")
  .viewport // 轮播视窗
    display flex
    overflow-x hidden
    scroll-behavior smooth // 实现平滑滚动
    .slide // 轮播卡片
      width 100%
      height 400px
      font-size 100px
      color white
      background #f99
      flex-shrink 0
      display flex
      justify-content center
      align-items center
      transition transform 0.5s
      position relative
      &:nth-child(even) 
        background-color #99f
    a // 前进后退按钮
      width 50px
      height @width
      border-radius 50%
      display block
      position absolute
      top 50%
      left 0
      transform translateY(-50%)
      &.action-next
        left auto
        right 0
  .dots // 分页器
    display flex
    justify-content center
    gap 8px
    position absolute
    left 0
    right 0
    bottom 0
    transform translateY(90%)
    a // 控制点
      width 16px
      height @width
      background #333
      border-radius 50%
      display block
      box-sizing border-box


body 
  height 100vh
  font-size 16px
  display flex
  align-items center
  justify-content center

/**
  description: gradually implement <only css carousel>
  source posts link: https://css-tricks.com/css-only-carousel/
  my blog link: https://yogwang.site/2021/CSS-only-carousel/
*/