當縮略圖超過 8 個時，Carousel React Fluent UI 無法正確呈現

Question

這個問題讓我失去理智。 我想使用帶有縮略圖的 React Fluent UI Carousel 組件並將其放在我的容器中間，一切正常，直到我添加超過 8 張幻燈片。 輪播移動到屏幕左側並最終從視口中消失。

我正在使用 Fluent UI 中的默認代碼片段在這里可用Fluent ui 縮略圖輪播

在此處輸入圖片說明

Answer 1

只需覆蓋以下屬性：

.ln {
    width: 600px;
}

.ui-carousel__navigation {
  margin-top: -55px !important;
  position: absolute;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  width: 1000px;
  margin-left: -200px;
}

.nb {
    transform:none !important;
}

.ol {
    transform: none !important;
}

.nc {
    transform: none !important;
}