martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-03-13 00:50:03 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

changing carosel nav icon

Browse Source
This commit is contained in:
Roland Osborne 2022-04-29 14:21:32 -07:00
parent cb4f6e8fa3
commit 5823b0124c
2 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
net/web/src/Carousel/Carousel.jsx
View File

@ -11,6 +11,7 @@ export function Carousel({ items, itemRenderer }) {
const [itemIndex, setItemIndex] = useState(0);
const [scrollLeft, setScrollLeft] = useState('hidden');
const [scrollRight, setScrollRight] = useState('hidden');
const FUDGE = 1;
let carousel = useRef();
let itemWidth = useRef(new Map());
@ -44,7 +45,7 @@ export function Carousel({ items, itemRenderer }) {
const setScroll = () => {
let pos = 0;
for (let i = 0; i < itemIndex; i++) {
pos += itemWidth.current.get(i) + 32;
pos += itemWidth.current.get(i) + 32 + FUDGE;
}
if (carousel.current) {
carousel.current.scrollTo({ top: 0, left: pos, behavior: 'smooth' });
@ -102,8 +103,8 @@ export function Carousel({ items, itemRenderer }) {
{slots}
</div>
<div class="arrows">
<div class="arrow" style={{ visibility: scrollLeft }} onClick={onLeft}><LeftOutlined /></div>
<div class="arrow" style={{ visibility: scrollRight }} onClick={onRight}><RightOutlined /></div>
<div class="arrow" onClick={onRight}><RightOutlined style={{ visibility: scrollRight }} /></div>
<div class="arrow" onClick={onLeft}><LeftOutlined style={{ visibility: scrollLeft }} /></div>
</div>
</CarouselWrapper>
);

23
net/web/src/Carousel/Carousel.styled.js
View File

@ -11,7 +11,7 @@ export const CarouselWrapper = styled.div`
display: flex;
flex-direction: row;
width: 100%;
padding-left: 16px;
padding-left: 32px;
overflow: hidden;
/* hide scrollbar for IE, Edge and Firefox */
@ -24,27 +24,22 @@ export const CarouselWrapper = styled.div`
}
.arrows {
width: 128px;
height: 100%;
display: flex;
flex-direction: row;
padding-left: 16px;
flex-direction: column;
position: absolute;
left: calc(50% - 64px);
justify-content: center;
bottom: 8px;
}
.arrow {
height: 50%;
background-color: #888888;
color: white;
opacity: 0.8;
padding-left: 4px;
padding-right: 4px;
margin-left: 8px;
margin-right: 8px;
font-size: 20px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
border: 1px solid white;
display: flex;
flex-direction: column;
justify-content: center;
}
.arrow:hover {