diff --git a/components/Marathon/Mentors.jsx b/components/Marathon/Mentors.jsx index 79093ac..fdb1803 100644 --- a/components/Marathon/Mentors.jsx +++ b/components/Marathon/Mentors.jsx @@ -148,7 +148,7 @@ const mentors = [ title: '助教小天使', name: '蘇冠彰', image: '/assets/mentors/card-partner-6.jpg', - tags: ['島島阿學行銷與網站改版開發夥伴', '中原大學應用華語系與心理學系大四生'], + tags: ['島島阿學核心團隊', '島島阿學行銷與網站改版開發夥伴', '中原大學應用華語系與心理學系大四生'], social: { medium: { text: 'kangarooblog', @@ -202,6 +202,8 @@ const Mentors = () => { const mentorsRef = useRef(null); const [activeMentorName, setActiveMentorName] = useState(''); const [isOpen, setIsOpen] = useState(false); + const [touchStartX, setTouchStartX] = useState(null); + const timer = useRef(null); const { translateX, isEnd } = useMemo(() => { const currentTranslateX = currentMentor * 301; if (window.innerWidth + currentTranslateX > mentorsRef.current?.scrollWidth) { @@ -220,13 +222,24 @@ const Mentors = () => { const activeMentor = useMemo(() => mentors.find((mentor) => mentor.name === activeMentorName), [activeMentorName]); + const checkTimer = () => { + if (timer.current) return true; + timer.current = true; + setTimeout(() => { + timer.current = false; + }, 300); + return false; + }; + const handleNextMentor = () => { + if (checkTimer()) return; if (!isEnd) { setCurrentMentor((prev) => prev + 1); } }; const handlePrevMentor = () => { + if (checkTimer()) return; if (currentMentor > 0) { setCurrentMentor((prev) => prev - 1); } @@ -241,9 +254,29 @@ const Mentors = () => { setIsOpen(false); }; + const handleTouchStart = (e) => { + setTouchStartX(e.touches[0].clientX); + }; + + const handleTouchMove = (e) => { + const touchMoveX = e.touches[0].clientX; + const deltaX = touchMoveX - touchStartX; + if (Math.abs(deltaX) > 50) { + if (deltaX < 0) { + handleNextMentor(); + } else { + handlePrevMentor(); + } + } + }; + + const handleTouchEnd = (e) => { + setTouchStartX(null); + }; + return ( <> -
+

引導師介紹

@@ -255,7 +288,13 @@ const Mentors = () => {
-
+
{mentors.map((mentor) => ( { >
- {mentor.tags.slice(0, 2).map((tag, index) => ( + {mentor.tags.slice(0, 1).map((tag, index) => ( {
{activeMentor?.title} | {activeMentor?.name}
{activeMentor?.tags.map((tag) => ( - + ))}