阿若（Michelle）

Pug

      .carousel
        h2.container-title 精選文章
        .carousel-cards
          .carousel-card 
            a(href="#") 
              img(src="../img/article-image1.png" alt="Vision Pro 登場！Vision Pro UI/UX 設計重點大公開 (上)")
              h3 Vision Pro 登場！Vision Pro UI/UX 設計重點大公開 (上)
              .content 
                span.tag UI/UX 新知
                span.date 2024/02/10
          .carousel-card 
            a(href="#") 
              img(src="../img/article-image2.png" alt="給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (下)")
              h3 給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (下)
              .content 
                span.tag UI/UX 新知
                span.date 2023/11/20
          .carousel-card 
            a(href="#") 
              img(src="../img/article-image3.png" alt="給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (上)")
              h3 給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (上)
              .content 
                span.tag UI/UX 新知
                span.date 2023/10/18
          .carousel-card.d-sm-none  
            a(href="#") 
              img(src="../img/article-image1.png" alt="Vision Pro 登場！Vision Pro UI/UX 設計重點大公開 (上)")
              h3 Vision Pro 登場！Vision Pro UI/UX 設計重點大公開 (上)
              .content 
                span.tag UI/UX 新知
                span.date 2024/02/10
          .carousel-card.d-sm-none  
            a(href="#") 
              img(src="../img/article-image2.png" alt="給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (下)")
              h3 給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (下)
              .content 
                span.tag UI/UX 新知
                span.date 2023/11/20
          .carousel-card.d-sm-none 
            a(href="#") 
              img(src="../img/article-image3.png" alt="給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (上)")
              h3 給設計師和工程師的 Figma-Dev Mode 開發模式使用指南 (上)
              .content 
                span.tag UI/UX 新知
                span.date 2023/10/18
        .carousel-dots
          .dot 
          .dot 
          .dot 
          .dot 
          .dot

Sass

.carousel
  max-width: 1296px
  margin: 0 auto
  padding: 120px 0
  overflow: hidden
  
.carousel-cards
  display: flex

  @include smscreen
    flex-direction: column
    margin: 0 12px

  .carousel-card
    flex:0 0 30%
    margin-right: 5%
    transform: translateX(0)
    transition: transform 1s

    @include pad
      flex:0 0 48%
      margin: 1%

    @include smscreen
      flex:0 0 98%

  a
    color: $primary
    margin-bottom: 40px

  img
    border-radius: 8px
    margin-bottom: 16px

  h3
    padding: 0 8px
    font-size: 20px
    line-height: 24px
    margin-bottom: 16px
    font-weight: bold

  .content
    padding: 0 8px
    display: flex
    justify-content: space-between

  .tag
    padding: 4px 12px
    border-radius: 16px
    background-color: $light-white
    color: $primary
    margin-right: 16px

  .date
    color: $secondary

.carousel-dots
  max-width: 124px
  margin: 0 auto
  display: flex
  justify-content: space-between

  @include smscreen
    display: none

  .dot
    width: 10px
    height: 10px
    background-color: #E9E9E9
    border-radius: 50%
    
    &:hover
      cursor: pointer

JS

const carouselCards = document.querySelector(".carousel-cards")
const carouselCard = document.querySelectorAll(".carousel-card")
const dot = document.querySelectorAll(".dot")

let num = 0;

if (diWidth > 375 && dot[0] && carouselCards) {
  for (d = 0; d < dot.length; d++) dot[d].dataset.num = d

  dot.forEach(function (item) {
    item.addEventListener("click", function (e) {
      let active = e.target.dataset.num
      num = active - 1
      changeCard()
    });
  });
  dot[0].style.backgroundColor = "#000000";
  let interval = setInterval(changeCard, 2500);
}

圖片輪播

Pug

Sass

JS