upgraded react and react-dom

src/containers/DisplayMovieRow.js

@@ -1,9 +1,17 @@
 import React, { Component } from 'react';
-import Slider from "react-slick";
-
+import { Swiper, SwiperSlide } from 'swiper/react';
+// Import Swiper styles
+import 'swiper/swiper.scss';
+import 'swiper/components/navigation/navigation.scss';
+import 'swiper/components/pagination/pagination.scss';
+import 'swiper/components/scrollbar/scrollbar.scss';
+import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 
 import MovieGenre from '../components/MovieGenre';
 
+// install Swiper components
+SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
+
 const getMovieRows = (movies, url, selectMovieHandler) => {
   const movieRow = movies.map((movie) => {
     let movieImageUrl =
@@ -46,62 +54,6 @@ export default class DisplayMovieRow extends Component {
 
   render() {
     console.log('DisplayMovie.render()', this.props.movies);
-    const settings = {
-      dots: true,
-      infinite: true,
-      speed: 1000,
-      draggable: false,
-      slidesToShow: 6,
-      slidesToScroll: 6,
-      initialSlide: 0,
-      responsive: [
-        {
-          breakpoint: 1824,
-          settings: {
-            slidesToShow: 6,
-            slidesToScroll: 6,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 1300,
-          settings: {
-            slidesToShow: 5,
-            slidesToScroll: 5,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 1100,
-          settings: {
-            slidesToShow: 4,
-            slidesToScroll: 4,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 798,
-          settings: {
-            slidesToShow: 3,
-            slidesToScroll: 3,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 500,
-          settings: {
-            slidesToShow: 2,
-            slidesToScroll: 2,
-            infinite: true,
-            dots: true
-          }
-        }
-      ]
-    };
     let netflixUrl = false;
     if (
       this.props.url ===
@@ -113,34 +65,42 @@ export default class DisplayMovieRow extends Component {
     return (
       <>
         <h1 className="movieShowcase__heading">{this.props.title}</h1>
-        <Slider
-          // className="movieShowcase__container"
-          {...settings}
+        <Swiper
+          spaceBetween={50}
+          slidesPerView={3}
+          navigation
+          pagination={{ clickable: true }}
+          scrollbar={{ draggable: true }}
+          onSwiper={(swiper) => console.log(swiper)}
+          onSlideChange={() => console.log('slide change')}
         >
-
-          {this.props.movies.map((movie, idx) => {
-            let movieImageUrl =
-              'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
-            if (
-              this.props.url ===
-              `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
-            ) {
-              movieImageUrl =
-                'https://image.tmdb.org/t/p/original/' + movie.poster_path;
-            }
-            return (
-              <div
-                className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
-              >
-                <img
-                  className="movieShowcase__container--movie-image"
-                  src={movieImageUrl}
-                />
-              </div>
-            );
-          })}
-        </Slider>
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+          <SwiperSlide>Slide 4</SwiperSlide>
+        </Swiper>
       </>
     );
   }
 }
+
+{/* <div className="movieShowcase__container">
+  {
+    this.props.movies.map((movie) => {
+      let movieImageUrl =
+        'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
+      if (
+        this.props.url ===
+        `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
+      ) {
+        movieImageUrl =
+          'https://image.tmdb.org/t/p/original/' + movie.poster_path;
+      }
+      return (
+        <div className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+          <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
+        </div>
+      )
+    })
+  }
+</div> */}

src/static/sass/components/_movieShowcase.scss

@@ -15,11 +15,11 @@
       overflow-y: hidden;
       transition: transform 450ms;
       overflow: -moz-hidden-unscrollable;
-      overflow-x: scroll;
+      // overflow-x: scroll;
       display: flex;
       width: 95vw;
-      overflow: -moz-scrollbars-horizontal;
-      grid-template-columns: repeat(20, 1fr);
+      // overflow: -moz-scrollbars-horizontal;
+      // grid-template-columns: repeat(20, 1fr);
       column-gap: 0;
 
       @include responsive(phone) {
@@ -86,6 +86,7 @@
          padding-bottom: 4rem;
          height: 21.5rem;
          min-height: 0;
+         object-fit: contain;
 
          @include responsive(tab_port) {
             height: 18.5rem;
@@ -101,6 +102,7 @@
 
          &-image {
             height: 100%;
+            // object-fit: contain;
          }
 
          &__netflix {
@@ -123,4 +125,32 @@
          }
       }
    }
+}
+
+// Slick carousel override styles
+.slick-track {
+   transition: transform 450ms;
+
+   &:hover>div.movieShowcase__container--movie-image {
+      opacity: .3;
+
+      &:hover {
+         transform: scale(1.5);
+         opacity: 1;
+      }
+   }
+}
+
+.slick-slider {
+   margin-right: 4rem;
+   // right: -5px !important;
+}
+
+.slick-prev {
+   left: 0 !important;
+   z-index: 10000;
+}
+
+.slick-next {
+   right: 0 !important;
 }