Carousel React Fluent UI does not render properly when have more than 8 thumbnails

Question

This problem is costing my sanity. I want to use the React Fluent UI Carousel component with thumbnails and place it in the middle of my container, everything works fine till I add more than 8 slides. The carousel moves to the left side of the screen and eventually disappears from the viewport.

I am using the default code snippet from Fluent UI IS AVAILABLE HERE Fluent ui thumbnail carousel

enter image description here

Answer 1

just overwrite the following properties:

.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;
}