implemented movie carrosuel

src/containers/MovieShowcase/MovieShowcase.js

@@ -9,28 +9,28 @@ class MovieShowcase extends Component {
     movies: []
   }
 
-  // componentWillMount() {
-  //   this.getTrending(); 
-  // }
+  componentWillMount() {
+    this.getTrending(); 
+  }
   
   getTrending = () => {
     const url = 'https://api.themoviedb.org/3/movie/popular?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US&page=1'; 
 
     axios.get(url)
       .then(res => {
-        console.log(res.data.results[0]); 
-        const movie = res.data.results[0]; 
+        console.log(res.data.results); 
+        const results = res.data.results; 
         let movieRows = []; 
 
-        // results.forEach((movie) => {
-          const movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
+        results.forEach((movie) => {
+          const movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.backdrop_path;
           console.log(movieImageUrl);
-        const movieComponent = <MovieShowCaseRow
+          const movieComponent = <MovieShowCaseRow
                                   key={movie.id}
                                   posterUrl={movieImageUrl}
                                   movie={movie}/>
           movieRows.push(movieComponent);                                   
-        // })
+         })
         // update state 
         this.setState({trendingMovieRows: movieRows})
 
@@ -47,7 +47,7 @@ class MovieShowcase extends Component {
 
 
       return <div className="movieShowcase">
-          <h1 onClick={this.getTrending} className="movieShowcase__heading">
+          <h1 className="movieShowcase__heading">
             New Releases
           </h1>
           <div className="movieShowcase__container">
@@ -55,9 +55,9 @@ class MovieShowcase extends Component {
             {/* {/* <div className="movieShowcase__container--movie">movie 1</div> */}
             {/* <div className="movieShowcase__container--movie"> */}
               {this.state.trendingMovieRows}
+              {/* {this.state.trendingMovieRows}
               {this.state.trendingMovieRows}
-              {this.state.trendingMovieRows}
-              {this.state.trendingMovieRows}
+              {this.state.trendingMovieRows} */}
             {/* </div> */}
             {/* <div className="movieShowcase__container--movie">movie 3</div>
             <div className="movieShowcase__container--movie">movie 4</div>

src/static/sass/components/_movieShowcase.scss

@@ -7,44 +7,50 @@
       padding-top: 2rem;
    }
 
-   &__container {
-        display: grid;
-        grid-template-columns: repeat(6, 1fr);
-        column-gap: .5rem;
+   &__container { // row inner
+      // z-index: 10000000;
+      transition: transform 450ms;
+      overflow: scroll;
+      flex: 1 1 auto;
+      display: grid;
+      grid-template-columns: repeat(20, 1fr);
+      column-gap: .5rem;
 
-      &--movie {
-         padding-top: 2rem;
-         padding-bottom: 2rem;
-          height: 35rem;
-         //  width: 20rem;
+      // &:hover {
+      //    transform: translate3d(3rem, 0, 0);
+      // }
+
+      &:hover &--movie {
+         opacity: .3;
+
+         &:hover {
+            transform: scale(1.5);
+            opacity: 1;
+         }
+      }
+      &:hover > *  {
+         transform: translate3d(-5rem, 0, 0); 
+      }
+      &--movie:hover ~ &--movie {
+          transform: translate3d(5rem, 0, 0); 
+      }
+
+      &--movie { // tile
+         cursor: pointer;
+         transition: all 450ms; 
+         transform: center left; 
+         padding-top: 4rem;
+         padding-bottom: 4rem;
+         height: 20rem;
+        
          &:not(:last-child) {
             padding-right: .5rem;
          }
        
          &-image {
             height: 100%;
-            transition: transform .3s;
-
-            &:hover {
-               transform: scale(1.18); 
-               transition: all .3s;
-               cursor: pointer;
-            }
          }
       }
    }
 }
 
-// .shit {
-//    width: 20rem;
-//    height: 10rem;
-
-//    &__poster {
-//       height: 20rem;
-//       width: 15rem;
-//    }
-
-//    &__image {
-//       height: 100%;
-//    }
-// }