fixed button styles

src/containers/DisplayMovieRow.js

@@ -66,18 +66,33 @@ export default class DisplayMovieRow extends Component {
       <>
         <h1 className="movieShowcase__heading">{this.props.title}</h1>
         <Swiper
-          spaceBetween={50}
-          slidesPerView={3}
+          className="movieShowcase__container"
+          slidesPerView={4}
           navigation
+          scrollbar={{ draggable: false, hide: true }}
+          slideToClickedSlide={{ draggable: false }}
           pagination={{ clickable: true }}
-          scrollbar={{ draggable: true }}
           onSwiper={(swiper) => console.log(swiper)}
           onSlideChange={() => console.log('slide change')}
         >
-          <SwiperSlide>Slide 1</SwiperSlide>
-          <SwiperSlide>Slide 2</SwiperSlide>
-          <SwiperSlide>Slide 3</SwiperSlide>
-          <SwiperSlide>Slide 4</SwiperSlide>
+          {
+            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 (
+                <SwiperSlide className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+                  <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
+                </SwiperSlide>
+              )
+            })
+          }
         </Swiper>
       </>
     );

src/static/sass/base/_animations.scss

@@ -1,2 +0,0 @@
-
-

src/static/sass/components/_movieShowcase.scss

@@ -12,42 +12,29 @@
    }
 
    &__container {
-      overflow-y: hidden;
+      // overflow-y: hidden;
       transition: transform 450ms;
-      overflow: -moz-hidden-unscrollable;
+      // overflow: -moz-hidden-unscrollable;
       // overflow-x: scroll;
-      display: flex;
-      width: 95vw;
+      // display: flex;
+      // width: 95vw;
       // overflow: -moz-scrollbars-horizontal;
       // grid-template-columns: repeat(20, 1fr);
-      column-gap: 0;
+      // column-gap: 0;
 
       @include responsive(phone) {
          width: 98vw;
       }
 
-
       &:hover &--movie {
          opacity: .3;
 
          &:hover {
-            transform: scale(1.5);
+            transform: scale(1.4);
             opacity: 1;
          }
       }
 
-      &:hover>* {
-         transform: translate3d(-5rem, 0, 0);
-
-         @include responsive(tab_port) {
-            transform: translate3d(-5rem, 0, 0);
-         }
-
-         @include responsive(phone) {
-            transform: translate3d(-3rem, 0, 0);
-         }
-      }
-
       &--movie:hover~&--movie {
          transform: translate3d(6rem, 0, 0);
 
@@ -60,15 +47,25 @@
          }
       }
 
+      // &:hover>div.swiper-wrapper>* {
+      //    // transform: translate3d(-5rem, 0, 0);
 
-      &:hover>&--movie__netflix {
-         transform: translate3d(-1rem, 0, 0);
-      }
+      //    @include responsive(tab_port) {
+      //       // transform: translate3d(-5rem, 0, 0);
+      //    }
 
-      &--movie__netflix:hover~&--movie__netflix {
-         // transform: translate3d(1rem, 0, 0);
-      }
+      //    @include responsive(phone) {
+      //       // transform: translate3d(-3rem, 0, 0);
+      //    }
+      // }
 
+      // &:hover>div.swiper-wrapper~&--movie__netflix {
+      //    transform: translate3d(-1rem, 0, 0);
+      // }
+
+      // &--movie__netflix:hover~&--movie__netflix {
+      //    transform: translate3d(1rem, 0, 0);
+      // }
       &:hover &--movie__netflix {
          opacity: .3;
 
@@ -127,30 +124,31 @@
    }
 }
 
-// Slick carousel override styles
-.slick-track {
-   transition: transform 450ms;
+// Override swiper styles
+.swiper-pagination {
+   top: 0;
+   height: 2rem;
+   text-align: right;
+   padding-right: 4rem;
+}
 
-   &:hover>div.movieShowcase__container--movie-image {
-      opacity: .3;
+.swiper-pagination-bullet {
+   background-color: rgb(255, 255, 255);
+}
 
-      &:hover {
-         transform: scale(1.5);
-         opacity: 1;
-      }
+.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);
    }
-}
 
-.slick-slider {
-   margin-right: 4rem;
-   // right: -5px !important;
-}
-
-.slick-prev {
-   left: 0 !important;
-   z-index: 10000;
-}
-
-.slick-next {
-   right: 0 !important;
 }

src/static/sass/style.scss

@@ -1,12 +1,9 @@
 @import "abstracts/functions";
-@import "abstracts/mixins";
 @import "abstracts/variables";
 
-@import "base/animations";
 @import "base/base";
-@import "base/utils";
 
-@import "components/backdrop"; 
+@import "components/backdrop";
 @import "components/modal";
 @import "components/search";
 @import "components/movie";
@@ -14,5 +11,4 @@
 
 @import "layout/footer";
 @import "layout/header";
-@import "layout/navigation";
-
+@import "layout/navigation";

webpack.config.js

@@ -16,8 +16,6 @@ module.exports = () => {
     return prev;
   }, {});
 
-  console.log('keys', envKeys);
-
   return {
     entry: './src/index.js',
     output: {