parent
af0ac4d462
commit
4cff5d7ea4
15 changed files with 278 additions and 28 deletions
@ -0,0 +1,32 @@ |
|||||||
|
import React, { Component, useState } from 'react'; |
||||||
|
import Carousel from 'react-elastic-carousel'; |
||||||
|
import CloseIcon from '@material-ui/icons/Close'; |
||||||
|
|
||||||
|
import './Gallery.scss'; |
||||||
|
|
||||||
|
export default function Gallery(props) { |
||||||
|
const [state,setState] = useState({ |
||||||
|
|
||||||
|
}); |
||||||
|
return ( |
||||||
|
<div className="gallery-modal d-flex justify-content align-items-center"> |
||||||
|
<div onClick={() => props.onClick(null)}> |
||||||
|
<CloseIcon style={{color : "red", width : 46, height : 46,position : 'absolute', right :5, top :20}} /> |
||||||
|
|
||||||
|
</div> |
||||||
|
<Carousel itemsToShow={1} isRTL={true} enableTilt={false} showArrows={true}> |
||||||
|
{ |
||||||
|
props.data.map(item => ( |
||||||
|
<Image item={item} key={item.id} /> |
||||||
|
)) |
||||||
|
} |
||||||
|
</Carousel> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const Image = (props) => { |
||||||
|
return ( |
||||||
|
<img style={{maxHeight : '50%', maxWidth : '100vw'}} src={props.item.src} /> |
||||||
|
); |
||||||
|
} |
@ -0,0 +1,66 @@ |
|||||||
|
@media screen and (max-width: 450px){ |
||||||
|
.gallery-modal{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #383737f1; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
z-index: 700; |
||||||
|
.rec-carousel-wrapper{ |
||||||
|
position: relative; |
||||||
|
bottom:70px; |
||||||
|
} |
||||||
|
.rec-arrow{ |
||||||
|
position: absolute; |
||||||
|
background : none; |
||||||
|
box-shadow:none; |
||||||
|
&:hover:enabled{ |
||||||
|
background : none; |
||||||
|
box-shadow:none; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
} |
||||||
|
.rec-arrow-right{ |
||||||
|
top : calc(50% - 20px); |
||||||
|
left: 0px; |
||||||
|
z-index: 800; |
||||||
|
} |
||||||
|
.rec-arrow-left{ |
||||||
|
top : calc(50% - 20px); |
||||||
|
right: 0px; |
||||||
|
z-index: 800; |
||||||
|
|
||||||
|
} |
||||||
|
.rec-pagination{ |
||||||
|
// display:none; |
||||||
|
z-index: 600; |
||||||
|
position: absolute; |
||||||
|
top: auto; |
||||||
|
bottom: -30px !important; |
||||||
|
// left: calc(50% - 20px) !important; |
||||||
|
& button{ |
||||||
|
background-color: grey; |
||||||
|
margin : 2px !important; |
||||||
|
box-shadow: 0px 0px 0px rgba(255,255,255,1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.rec-dot_active{ |
||||||
|
background-color: white !important; |
||||||
|
color: white !important; |
||||||
|
// box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.Carousel-button-10{ |
||||||
|
background-color: white !important; |
||||||
|
} |
||||||
|
.rec-pagination{ |
||||||
|
|
||||||
|
img{ |
||||||
|
// width: 100vw; |
||||||
|
// max-height: 200px; |
||||||
|
// height: 100vh; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue