martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-03-13 09:00:06 +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 [itemIndex, setItemIndex] = useState(0);
const [scrollLeft, setScrollLeft] = useState('hidden'); const [scrollLeft, setScrollLeft] = useState('hidden');
const [scrollRight, setScrollRight] = useState('hidden'); const [scrollRight, setScrollRight] = useState('hidden');
const FUDGE = 1;
let carousel = useRef(); let carousel = useRef();
let itemWidth = useRef(new Map()); let itemWidth = useRef(new Map());
@ -44,7 +45,7 @@ export function Carousel({ items, itemRenderer }) {
const setScroll = () => { const setScroll = () => {
let pos = 0; let pos = 0;
for (let i = 0; i < itemIndex; i++) { for (let i = 0; i < itemIndex; i++) {
pos += itemWidth.current.get(i) + 32; pos += itemWidth.current.get(i) + 32 + FUDGE;
} }
if (carousel.current) { if (carousel.current) {
carousel.current.scrollTo({ top: 0, left: pos, behavior: 'smooth' }); carousel.current.scrollTo({ top: 0, left: pos, behavior: 'smooth' });
@ -102,8 +103,8 @@ export function Carousel({ items, itemRenderer }) {
{slots} {slots}
</div> </div>
<div class="arrows"> <div class="arrows">
<div class="arrow" style={{ visibility: scrollLeft }} onClick={onLeft}><LeftOutlined /></div> <div class="arrow" onClick={onRight}><RightOutlined style={{ visibility: scrollRight }} /></div>
<div class="arrow" style={{ visibility: scrollRight }} onClick={onRight}><RightOutlined /></div> <div class="arrow" onClick={onLeft}><LeftOutlined style={{ visibility: scrollLeft }} /></div>
</div> </div>
</CarouselWrapper> </CarouselWrapper>
); );

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

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