Skip to content

Commit 6bdaa5c

Browse files
gndxgndx
committed
Carousel
1 parent cdede6b commit 6bdaa5c

File tree

7 files changed

+152
-0
lines changed

7 files changed

+152
-0
lines changed

‎src/assets/styles/components/Carousel.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.carousel {
2+
overflow: scroll;
3+
padding-left: 30px;
4+
width: 100%;
5+
position: relative;
6+
}
7+
8+
.carousel__container {
9+
transition: 450ms -webkit-transform;
10+
transition: 450ms transform;
11+
transition: 450ms transform, 450ms -webkit-transform;
12+
font-size: 0;
13+
white-space: nowrap;
14+
margin: 70px 0px;
15+
padding-bottom: 10px;
16+
}
17+
18+
.carousel__container:hover .carousel-item {
19+
opacity: 0.3;
20+
}
21+
22+
.carousel__container:hover .carousel-item:hover {
23+
-webkit-transform: scale(1.5);
24+
transform: scale(1.5);
25+
opacity: 1;
26+
}

‎src/assets/styles/components/CarouselItem.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.carousel-item {
2+
border-radius: 20px;
3+
overflow: hidden;
4+
position: relative;
5+
display: inline-block;
6+
width: 200px;
7+
height: 250px;
8+
margin-right: 10px;
9+
font-size: 20px;
10+
cursor: pointer;
11+
transition: 450ms all;
12+
-webkit-transform-origin: center left;
13+
transform-origin: center left;
14+
}
15+
16+
.carousel-item:hover ~ .carousel-item {
17+
-webkit-transform: translate3d(100px, 0, 0);
18+
transform: translate3d(100px, 0, 0);
19+
}
20+
21+
.carousel-item__img {
22+
width: 200px;
23+
height: 250px;
24+
-o-object-fit: cover;
25+
object-fit: cover;
26+
}
27+
28+
.carousel-item__details {
29+
align-items: flex-start;
30+
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
31+
bottom: 0;
32+
display: flex;
33+
font-size: 10px;
34+
flex-direction: column;
35+
justify-content: flex-end;
36+
left: 0;
37+
opacity: 0;
38+
transition: 450ms opacity;
39+
padding: 10px;
40+
position: absolute;
41+
right: 0;
42+
top: 0;
43+
}
44+
45+
.carousel-item__details--img {
46+
width: 20px;
47+
}
48+
49+
.carousel-item:hover .carousel-item__details {
50+
opacity: 1;
51+
}
52+
53+
.carousel-item__details--title {
54+
color: white;
55+
margin: 5px 0px 0px 0px;
56+
}
57+
58+
.carousel-item__details--subtitle {
59+
color: white;
60+
font-size: 8px;
61+
margin: 3px 0px;
62+
}

‎src/assets/styles/components/Categories.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.categories__title {
2+
background: #8f57fd;
3+
color: white;
4+
font-size: 16px;
5+
margin-top: -16px;
6+
position: absolute;
7+
padding-left: 30px;
8+
width: 100%;
9+
}

‎src/components/Carousel.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
import '../assets/styles/components/Carousel.scss';
3+
4+
const Carousel = ({ children }) => (
5+
<section class="carousel">
6+
<div class="carousel__container">
7+
{children}
8+
</div>
9+
</section>
10+
);
11+
12+
export default Carousel;

‎src/components/CarouselItem.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import '../assets/styles/components/CarouselItem.scss';
3+
4+
const CarouselItem = () => (
5+
<div className="carousel-item">
6+
<img className="carousel-item__img" src="https://images.pexels.com/photos/789822/pexels-photo-789822.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" />
7+
<div className="carousel-item__details">
8+
<div>
9+
<img className="carousel-item__details--img" src="../assets/play-icon.png" alt="Play Icon" />
10+
<img className="carousel-item__details--img" src="../assets/plus-icon.png" alt="Plus Icon" />
11+
</div>
12+
<p className="carousel-item__details--title">Título descriptivo</p>
13+
<p className="carousel-item__details--subtitle">2019 16+ 114 minutos</p>
14+
</div>
15+
</div>
16+
);
17+
18+
export default CarouselItem;

‎src/components/Categories.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import '../assets/styles/components/Categories.scss';
3+
4+
const Categories = ({ children }) => (
5+
<div className="categories">
6+
<h3 class="categories__title">Mi lista</h3>
7+
{children}
8+
</div>
9+
);
10+
11+
export default Categories;

‎src/containers/App.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
import React from 'react';
22
import Header from '../components/Header';
33
import Search from '../components/Search';
4+
import Categories from '../components/Categories';
5+
import Carousel from '../components/Carousel';
6+
import CarouselItem from '../components/CarouselItem';
7+
48
import '../assets/styles/App.scss';
59

610
const App = () => (
711
<div className="App">
812
<Header />
913
<Search />
14+
15+
<Categories>
16+
<Carousel>
17+
<CarouselItem />
18+
<CarouselItem />
19+
<CarouselItem />
20+
<CarouselItem />
21+
</Carousel>
22+
</Categories>
23+
1024
</div>
1125
);
1226

0 commit comments

Comments
 (0)