Fixed: Navigation for cast and crew

frontend/src/Movie/Details/Credits/MovieCreditPosters.css

@@ -9,3 +9,9 @@
 .container {
   padding: 10px;
 }
+
+.sliderContainer {
+  --swiper-navigation-color: var(--white);
+
+  display: block;
+}

frontend/src/Movie/Details/Credits/MovieCreditPosters.css.d.ts

@@ -4,6 +4,7 @@ interface CssExports {
   'container': string;
   'grid': string;
   'movie': string;
+  'sliderContainer': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Movie/Details/Credits/MovieCreditPosters.js

@@ -66,32 +66,8 @@ class MovieCreditPosters extends Component {
       posterHeight: 238,
       rowHeight: calculateRowHeight(238, props.isSmallScreen)
     };
-
-    this._isInitialized = false;
   }
 
-  //
-  // Control
-
-  calculateGrid = (width = this.state.width, isSmallScreen) => {
-
-    const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
-    const columnWidth = calculateColumnWidth(width, 'small', isSmallScreen);
-    const columnCount = Math.max(Math.floor(width / columnWidth), 1);
-    const posterWidth = columnWidth - padding;
-    const posterHeight = calculatePosterHeight(posterWidth);
-    const rowHeight = calculateRowHeight(posterHeight, isSmallScreen);
-
-    this.setState({
-      width,
-      columnWidth,
-      columnCount,
-      posterWidth,
-      posterHeight,
-      rowHeight
-    });
-  };
-
   //
   // Render
 
@@ -114,13 +90,12 @@ class MovieCreditPosters extends Component {
           slidesPerView='auto'
           spaceBetween={10}
           slidesPerGroup={3}
+          navigation={true}
           loop={false}
           loopFillGroupWithBlank={true}
           className="mySwiper"
           modules={[Navigation]}
           onInit={(swiper) => {
-            swiper.params.navigation.prevEl = this._swiperPrevRef;
-            swiper.params.navigation.nextEl = this._swiperNextRef;
             swiper.navigation.init();
             swiper.navigation.update();
           }}