fixed slide group bug on carousel component

src/containers/DisplayMovieRow.js

@@ -17,15 +17,29 @@ export default class DisplayMovieRow extends Component {
     super(props);
     this.state = {
       value: 0,
+      width: window.innerWidth
     };
   }
 
+
+  componentDidMount() {
+    window.addEventListener("resize", this.handleResize);
+  }
+
+  componentWillUnMount() {
+    window.addEventListener("resize", this.handleResize);
+  }
+
+  handleResize = (e) => {
+    this.setState({ width: window.innerWidth });
+  };
+
   onSlideChange = (value) => {
     this.setState({ value })
   }
 
   render() {
-    console.log('DisplayMovie.render()', this.props.movies);
+    const { width } = this.state;
     let netflixUrl = false;
     if (
       this.props.url ===
@@ -39,24 +53,27 @@ export default class DisplayMovieRow extends Component {
         <h1 className="movieShowcase__heading">{this.props.title}</h1>
         <Swiper
           className="movieShowcase__container"
-          // slidesPerView={4}
           navigation
           grabCursor={false}
-          slidesPerGroup={4}
           draggable={false}
           loop={true}
+          loopAdditionalSlides={2}
           breakpoints={{
             1378: {
-              slidesPerView: 5
+              slidesPerView: 5,
+              slidesPerGroup: 5
             },
             998: {
-              slidesPerView: 4
+              slidesPerView: 4,
+              slidesPerGroup: 4
             },
             625: {
-              slidesPerView: 3
+              slidesPerView: 3,
+              slidesPerGroup: 3,
             },
             0: {
-              slidesPerView: 2
+              slidesPerView: 2,
+              slidesPerGroup: 2
             },
           }}
           preventClicksPropagation={true}
@@ -64,11 +81,9 @@ export default class DisplayMovieRow extends Component {
           scrollbar={{ draggable: false, hide: true }}
           slideToClickedSlide={false}
           pagination={{ clickable: true }}
-          onSwiper={(swiper) => console.log(swiper)}
-          onSlideChange={() => console.log('slide change')}
         >
           {
-            this.props.movies.map((movie) => {
+            this.props.movies.map((movie, idx) => {
               let movieImageUrl =
                 'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
               if (
@@ -80,7 +95,7 @@ export default class DisplayMovieRow extends Component {
               }
               if (movie.poster_path && movie.backdrop_path !== null) {
                 return (
-                  <SwiperSlide className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+                  <SwiperSlide key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
                     <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
                   </SwiperSlide>
                 )

src/static/sass/components/_movieShowcase.scss

@@ -97,19 +97,9 @@ div.swiper-button-next {
          transform: center left;
          padding-top: 3.5rem;
          padding-bottom: 4rem;
-         // height: 21.5rem;
          min-height: 0;
          object-fit: contain;
 
-         @include responsive(tab_port) {
-            // height: 18.5rem;
-            // height: 40rem;
-         }
-
-         @include responsive(phone) {
-            // height: 14rem;
-         }
-
          &:not(:last-child) {
             padding-right: .5rem;
          }
@@ -125,18 +115,9 @@ div.swiper-button-next {
             padding-top: 3rem;
             padding-bottom: 4rem;
             padding-right: 1rem;
-            // height: 52rem;
             cursor: pointer;
             transition: all 450ms;
             transform: center left;
-
-            @include responsive(tab_port) {
-               // height: 42rem;
-            }
-
-            @include responsive(phone) {
-               // height: 34rem;
-            }
          }
       }
    }