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