set carousel styels

src/containers/DisplayMovieRow.js

@@ -69,8 +69,13 @@ export default class DisplayMovieRow extends Component {
           className="movieShowcase__container"
           slidesPerView={4}
           navigation
+          grabCursor={false}
+          draggable={false}
+          loop={true}
+          preventClicksPropagation={true}
+          preventClicks={true}
           scrollbar={{ draggable: false, hide: true }}
-          slideToClickedSlide={{ draggable: false }}
+          slideToClickedSlide={false}
           pagination={{ clickable: true }}
           onSwiper={(swiper) => console.log(swiper)}
           onSlideChange={() => console.log('slide change')}
@@ -86,11 +91,13 @@ export default class DisplayMovieRow extends Component {
                 movieImageUrl =
                   'https://image.tmdb.org/t/p/original/' + movie.poster_path;
               }
-              return (
+              if (movie.poster_path && movie.backdrop_path !== null) {
-                <SwiperSlide className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+                return (
-                  <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
+                  <SwiperSlide className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
-                </SwiperSlide>
+                    <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
-              )
+                  </SwiperSlide>
+                )
+              }
             })
           }
         </Swiper>

src/static/sass/components/_movieShowcase.scss

@@ -1,3 +1,42 @@
+// Override swiper styles
+.swiper-pagination {
+   top: 0;
+   height: 2rem;
+   text-align: right;
+   padding-right: 4rem;
+}
+
+.swiper-pagination-bullet {
+   background-color: rgb(255, 255, 255);
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets {
+   bottom: 0;
+   left: 0;
+   width: 100%;
+}
+
+div.swiper-button-prev,
+div.swiper-button-next {
+   color: rgb(252, 252, 252);
+   transition: all .3s;
+
+   &:hover {
+      transition: all .3s;
+   }
+
+}
+
+.swiper-wrapper:hover .swiper-slide {
+   opacity: .3;
+
+   &:hover {
+      transform: scale(1.4);
+      opacity: 1;
+   }
+}
+
+
 .movieShowcase {
    background-color: $color-background;
    grid-column: 2 / 13;
@@ -12,26 +51,18 @@
    }
 
    &__container {
-      // overflow-y: hidden;
       transition: transform 450ms;
-      // overflow: -moz-hidden-unscrollable;
-      // overflow-x: scroll;
-      // display: flex;
-      // width: 95vw;
-      // overflow: -moz-scrollbars-horizontal;
-      // grid-template-columns: repeat(20, 1fr);
-      // column-gap: 0;
 
       @include responsive(phone) {
          width: 98vw;
       }
 
       &:hover &--movie {
-         opacity: .3;
+         // opacity: .3;
 
          &:hover {
-            transform: scale(1.4);
+            // transform: scale(1.4);
-            opacity: 1;
+            // opacity: 1;
          }
       }
 
@@ -99,7 +130,8 @@
 
          &-image {
             height: 100%;
-            // object-fit: contain;
+            width: 100%;
+            object-fit: contain;
          }
 
          &__netflix {
@@ -123,32 +155,3 @@
       }
    }
 }
-
-// Override swiper styles
-.swiper-pagination {
-   top: 0;
-   height: 2rem;
-   text-align: right;
-   padding-right: 4rem;
-}
-
-.swiper-pagination-bullet {
-   background-color: rgb(255, 255, 255);
-}
-
-.swiper-container-horizontal>.swiper-pagination-bullets {
-   bottom: 0;
-   left: 0;
-   width: 100%;
-}
-
-div.swiper-button-prev,
-div.swiper-button-next {
-   color: rgb(252, 252, 252);
-   transition: all .3s;
-
-   &:hover {
-      background-color: grayscale($color: #202020);
-   }
-
-}