From fa722e065412966730ac519914d9ac1bccda0133 Mon Sep 17 00:00:00 2001
From: tommoze <33844718+tommoze@users.noreply.github.com>
Date: Thu, 17 Oct 2024 21:19:43 +0300
Subject: [PATCH] story: scroll snap stop always

---
 stories/slideshow.module.css  |  4 ++++
 stories/slideshow.stories.tsx | 19 +++++++++++++++++++
 stories/slideshow.tsx         | 11 +++++++----
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/stories/slideshow.module.css b/stories/slideshow.module.css
index 2c0702e..599a497 100644
--- a/stories/slideshow.module.css
+++ b/stories/slideshow.module.css
@@ -44,6 +44,10 @@
   scroll-snap-align: start;
 }
 
+.snapStop {
+  scroll-snap-stop: always;
+}
+
 .itemText {
   position: absolute;
   z-index: 100;
diff --git a/stories/slideshow.stories.tsx b/stories/slideshow.stories.tsx
index 00408d3..d3e9826 100644
--- a/stories/slideshow.stories.tsx
+++ b/stories/slideshow.stories.tsx
@@ -60,3 +60,22 @@ export const ScrollPadding = () => {
     />
   );
 };
+
+export const SnapEachSlide = () => {
+  return (
+    <SlideShow
+      items={items}
+      renderItem={({ item, index, isActive, isSnapPoint }) => (
+        <SlideShowItem
+          key={index}
+          isSnapPoint={isSnapPoint}
+          isActive={isActive}
+          src={item.src}
+          title={item.title}
+          subtitle={item.subtitle}
+          isSnapStop
+        />
+      )}
+    />
+  );
+};
diff --git a/stories/slideshow.tsx b/stories/slideshow.tsx
index 1786efb..a69d1ec 100644
--- a/stories/slideshow.tsx
+++ b/stories/slideshow.tsx
@@ -45,18 +45,18 @@ export const SlideShow = <T extends any>({
     const handle = (e: KeyboardEvent) => {
       switch (e.key) {
         case 'ArrowLeft':
-          next();
+          prev();
           return;
         case 'ArrowRight':
-          prev();
+          next();
           return;
         default:
           return;
       }
     };
-    window.addEventListener('keypress', handle);
+    window.addEventListener('keydown', handle);
     return () => {
-      window.removeEventListener('keypress', handle);
+      window.removeEventListener('keydown', handle);
     };
   }, [next, prev]);
 
@@ -118,6 +118,7 @@ export const SlideShow = <T extends any>({
 
 export interface SlideShowItemProps {
   readonly isSnapPoint: boolean;
+  readonly isSnapStop?: boolean;
   readonly isActive: boolean;
   readonly src: string;
   readonly title: string;
@@ -126,6 +127,7 @@ export interface SlideShowItemProps {
 
 export const SlideShowItem = ({
   isSnapPoint,
+  isSnapStop,
   isActive,
   src,
   title,
@@ -135,6 +137,7 @@ export const SlideShowItem = ({
     <li
       className={classNames(styles.item, {
         [styles.snapPoint]: isSnapPoint,
+        [styles.snapStop]: isSnapStop,
         [styles.itemActive]: isActive
       })}
     >