Misc: Clearer that it is a album slideshow

src/components/Slideshow.tsx

@@ -39,12 +39,11 @@ function Slideshow({ className }: { className?: string }) {
     onTouchMove,
   } = useSlideshow(trackRef);
 
-
   return (
     <div
       style={{ willChange: "transform" }}
       className={twMerge(
-        "absolute top-1/2 left-1/2 -translate-y-1/2",
+        "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
         className
       )}
       onMouseDown={(e) => onMouseDown(e.clientX)}
@@ -74,7 +73,7 @@ function ImageSlide({ src, alt }: { src: string; alt: string }) {
       <img
         width={1280}
         height={720}
-        style={{ objectPosition: "100% center", willChange: "transform" }}
+        style={{ objectPosition: "50% center", willChange: "transform" }}
         className="aspect-[5/7] w-[80vmin] object-cover sm:w-[40vmin]"
         src={src}
         alt={alt}

src/hooks/useSlideShow.ts

@@ -41,9 +41,15 @@ function animateTrack(track: HTMLDivElement, nextPercentage: number) {
 function animateImages(images: HTMLImageElement[]) {
   for (const image of images) {
     const { right, left } = image.getBoundingClientRect();
+    /*
     if (right < 0 || left > window.innerWidth) {
       continue; // Skip images not in viewport
+    }*/
+
+    if (right < -image.width || left > window.innerWidth + image.width) {
+      continue; // Skip images not in viewport
     }
+
     updateImageObjectPosition(image);
   }
 }
@@ -78,6 +84,7 @@ function useSlideshow(trackRef: React.RefObject<HTMLDivElement>) {
         resizeRAFId = null;
       });
     };
+    handleResize();
 
     window.addEventListener("resize", handleResize);
     return () => {
@@ -97,8 +104,8 @@ function useSlideshow(trackRef: React.RefObject<HTMLDivElement>) {
     const maxDelta = curr.clientWidth / 2;
     const percentage = (delta / maxDelta) * -100;
     return Math.max(
-      Math.min(prevSlide.current + percentage, 0),
-      -100
+      Math.min(prevSlide.current + percentage, 50),
+      -50
     );
   }