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}`)= i2

.carousel 
  width 300px
  text-align center
  overflow hidden
  position relative
  .viewport  // 轮播视窗
    display flex
    gap 1rem
    overflow-x hidden
    scroll-behavior smooth // 实现平滑滚动
    .slide  // 轮播卡片
      width 300px
      height @width
      font-size 100px
      background #eee
      border-radius 10px
      flex-shrink 0
      display flex
      justify-content center
      align-items center
      transition transform 0.5s
      position relative
    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 // 分页器
    margin-top .5rem
    display flex
    justify-content center
    gap .5rem
    a // 控制点
      width 1.5rem
      height @width
      line-height @height
      text-align center
      text-decoration none
      background white
      border-radius 50%
      display block
      &:focus 
        background #000
      &:active 
        top 1px

// 脑洞部分就在这里了
.carousel
  // 前进后退按钮
  &:before,&:after
    content 'Prev'
    width 50px
    height @width
    line-height @height
    font-size 14px
    color white
    background black
    border-radius 50%
    display block
    position absolute
    top 50%
    left 0
    z-index 10
    pointer-events none
    transform translateY(-50%)
  &:after
    content 'Next'
    left auto
    right 0

body 
  height 100vh
  display: flex
  align-items center
  justify-content center
  background linear-gradient(to bottom, #74ABE2, #5563DE)

/**
  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/
*/