|
|
|
|
@@ -46,6 +46,22 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
|
|
|
|
|
const scrollLeftRef = React.useRef(0);
|
|
|
|
|
const isDraggingRef = React.useRef(false);
|
|
|
|
|
const [isDragging, setIsDragging] = React.useState(false);
|
|
|
|
|
const [paddingX, setPaddingX] = React.useState(24);
|
|
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
|
const updatePadding = () => {
|
|
|
|
|
const containerEl = document.querySelector('#referenzen .container');
|
|
|
|
|
if (containerEl) {
|
|
|
|
|
const rect = containerEl.getBoundingClientRect();
|
|
|
|
|
const computedStyle = window.getComputedStyle(containerEl);
|
|
|
|
|
const pLeft = parseFloat(computedStyle.paddingLeft || '0');
|
|
|
|
|
setPaddingX(rect.left + pLeft);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
updatePadding();
|
|
|
|
|
window.addEventListener('resize', updatePadding);
|
|
|
|
|
return () => window.removeEventListener('resize', updatePadding);
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const badge = props.badge || data?.badge || t('badge');
|
|
|
|
|
const title = props.title || data?.title || t('title');
|
|
|
|
|
@@ -115,7 +131,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
|
|
|
|
|
onMouseLeave={onMouseLeave}
|
|
|
|
|
onMouseUp={onMouseUp}
|
|
|
|
|
onMouseMove={onMouseMove}
|
|
|
|
|
className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 px-6 md:px-[max(2rem,calc((100vw_-_1280px)_/_2))] lg:px-[max(2.5rem,calc((100vw_-_1280px)_/_2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
|
|
|
|
|
style={{ paddingLeft: paddingX, paddingRight: paddingX }}
|
|
|
|
|
className={`select-none flex gap-6 overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
|
|
|
|
|
>
|
|
|
|
|
{references.map((ref, i) => {
|
|
|
|
|
const imgSrc = ref.image
|
|
|
|
|
|