diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css b/frontend/src/Movie/Details/Credits/MovieCreditPosters.css index 2bd05a5e01..b0253c8046 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css +++ b/frontend/src/Movie/Details/Credits/MovieCreditPosters.css @@ -9,3 +9,9 @@ .container { padding: 10px; } + +.sliderContainer { + --swiper-navigation-color: var(--white); + + display: block; +} diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css.d.ts b/frontend/src/Movie/Details/Credits/MovieCreditPosters.css.d.ts index 339e1f48d4..8b001991a6 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPosters.css.d.ts +++ b/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; diff --git a/frontend/src/Movie/Details/Credits/MovieCreditPosters.js b/frontend/src/Movie/Details/Credits/MovieCreditPosters.js index b0e5c83e76..6563b30df6 100644 --- a/frontend/src/Movie/Details/Credits/MovieCreditPosters.js +++ b/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(); }}