fix dot button autoscroll animation

hackupc · Apr 4, 2024 · a41c6fb · a41c6fb
1 parent 5ce7a62
commit a41c6fb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 23 deletions.
diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx
@@ -204,7 +204,13 @@ const EmblaCarousel: React.FC<PropType> = ({ slides, options }) => {
           {scrollSnaps.map((_, index) => (
             <DotButton
               key={index}
-              onClick={() => onDotButtonClick(index)}
+              onClick={() => {
+                onDotButtonClick(index);
+                const autoScroll = emblaApi?.plugins()?.autoScroll;
+                if (autoScroll && typeof autoScroll.stop === "function") {
+                  autoScroll.stop();
+                }
+              }}
               selectedIndex={selectedIndex === index}
             />
           ))}

diff --git a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx
@@ -65,50 +65,29 @@ type PropType = PropsWithChildren<
 const EmblaDot = styled.button<{ selectedIndex: boolean }>`
   appearance: none;
   touch-action: manipulation;
-  display: inline-flex;
   text-decoration: none;
   cursor: url("/rocket-fire.png"), auto;
   border: 0;
   padding: 0.6rem;
   margin: 0.1rem;
-  width: 1.0rem;
-  height: 1.0rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   position: relative;
   user-select: none;
   outline: none;
-  
-  
+
   background-color: ${(props) => {
     return props.selectedIndex ? "orangered" : "slategray";
   }};
-
- 
-}
-
-
-&::after {
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 `;
 
 export const DotButton: React.FC<PropType> = ({
   selectedIndex,
   children,
   ...restProps
 }) => {
-  // Extract the selectedIndex prop and pass the rest of the props to the styled component
   return (
     <EmblaDot selectedIndex={selectedIndex} {...restProps}>
       {children}