Props for slide sizing (#17)

rosingrind · Oct 4, 2020 · 8fc71fd · 8fc71fd
1 parent 96d87d0
commit 8fc71fd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 35 deletions.
diff --git a/src/Slide/index.module.scss b/src/Slide/index.module.scss
@@ -1,6 +1,12 @@
 .slide {
   position: absolute;
-  width: 100%;
-  height: auto;
   padding: 0 8px;
+  display: flex;
+  justify-content: center;
+
+  & > img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 }
diff --git a/src/Slide/index.tsx b/src/Slide/index.tsx
@@ -39,8 +39,11 @@ const Slide: React.FC<{
   offset: number;
   move: number;
   len: number;
-  imgsize: number;
-}> = ({ src, animation: { timing, speed }, offset, move, len, imgsize }) => {
+  size: {
+    width: number;
+    height: number;
+  };
+}> = ({ src, animation: { timing, speed }, offset, move, len, size }) => {
   const [current, setCurrent] = useState(offset);
   const [anim, setAnim] = useState<{ interrupt: () => void }>();
 
@@ -67,14 +70,16 @@ const Slide: React.FC<{
 
   const pos = (((current % len) + len) % len) - half;
   return (
-    <img
-      src={src}
-      alt={src}
+    <div
       className={styles.slide}
       style={{
-        left: `${pos * imgsize}px`,
+        width: `${size.width}px`,
+        height: `${size.height}px`,
+        left: `${pos * size.width}px`,
       }}
-    />
+    >
+      <img src={src} alt={src} />
+    </div>
   );
 };
 

diff --git a/src/index.module.scss b/src/index.module.scss
@@ -1,9 +1,4 @@
 @value fadetime: 0.65s;
-@value imgsize: 1138px;
-
-:export {
-  transition: fadetime;
-}
 
 .wrapper {
   width: 100%;
@@ -35,19 +30,6 @@
     display: flex;
     width: 100%;
     height: 100%;
-
-    & > div {
-      display: contents;
-      width: 100%;
-      visibility: hidden;
-
-      & > img {
-        position: inherit;
-        width: 100%;
-        height: auto;
-        padding: 0 8px;
-      }
-    }
   }
 
   & > span {

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,14 +4,14 @@ import styles from './index.module.scss';
 import './index.scss';
 import Slide from './Slide';
 
-const fadetime = parseFloat(styles.fadetime);
-const imgsize = parseFloat(styles.imgsize);
-
 const cx = classNames.bind(styles);
 
 const Carousel: React.FC<{
   slides: string[];
-  size: { width: number; height: number };
+  size: {
+    width: number;
+    height: number;
+  };
   animation: {
     timing: (x: number) => number;
     speed: number;
@@ -24,6 +24,7 @@ const Carousel: React.FC<{
   const [move, setMove] = useState(0);
   const [slides, setSlides] = useState(data);
   const [swipe, setSwipe] = useState<number | undefined>();
+  // const [maxW, setMaxW] = useState<number | undefined>(0);
 
   useEffect(() => {
     if (data.length === 2) setSlides([...data, ...data]);
@@ -64,13 +65,25 @@ const Carousel: React.FC<{
     dot: (selected: boolean) => cx({ dot: true, selected }),
   };
 
+  // for (const s of slides) {
+  //   const img = new Image();
+  //   img.onload = function () {
+  //     if (this.width > maxW) setMaxW(this.width);
+  //   };
+  //   img.src = s;
+  // }
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.carousel}>
         <div>
-          <div>
-            <img src={slides[0]} alt={slides[0]} />
-          </div>
+          <span
+            style={{
+              visibility: 'hidden',
+              width: `${size.width}px`,
+              height: `${size.height}px`,
+            }}
+          ></span>
           {slides.map((s, key) => (
             <Slide
               key={key}
@@ -79,7 +92,7 @@ const Carousel: React.FC<{
               offset={key}
               move={move}
               len={slides.length}
-              imgsize={imgsize}
+              size={size}
             />
           ))}
         </div>