feat: swiper에 fade effect를 적용할 수 있게 한다

pedaling · Jul 1, 2020 · a276a2b · a276a2b · vercel · Jul 1, 2020
1 parent 16ec27a
commit a276a2b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/docs/components/Swiper.mdx b/docs/components/Swiper.mdx
@@ -54,3 +54,25 @@ import { PlayGroundBanner } from '../docsComponents';
     </Slide>
   </Swiper>
 </Playground>
+
+## Fade Effect Swiper 
+
+<Playground>
+  <Swiper effect="fade">
+    <Slide>
+      <PlayGroundBanner backgroundColor={Colors.red100} fill>
+        배너1
+      </PlayGroundBanner>
+    </Slide>
+    <Slide>
+      <PlayGroundBanner backgroundColor={Colors.blue200} fill>
+        배너2
+      </PlayGroundBanner>
+    </Slide>
+    <Slide>
+      <PlayGroundBanner backgroundColor={Colors.orange300} fill>
+        배너3
+      </PlayGroundBanner>
+    </Slide>
+  </Swiper>
+</Playground>
diff --git a/src/components/Swiper/index.tsx b/src/components/Swiper/index.tsx
@@ -3,18 +3,18 @@ import React, { FC, MutableRefObject, ReactNode, useEffect, useRef, useState } f
 import { SwiperOptions } from 'swiper';
 import {
   Autoplay,
+  EffectFade,
+  Keyboard,
+  Lazy,
   Navigation,
   Pagination,
   Swiper as OriginalSwiper,
   Virtual,
-  Lazy,
-  Keyboard,
 } from 'swiper/dist/js/swiper.esm.js';
-
 import { createUniqIDGenerator } from '../../utils/createUniqIDGenerator';
 import { DefaultNavigation } from './DefaultNavigation';
 
-OriginalSwiper.use([Navigation, Pagination, Autoplay, Virtual, Lazy, Keyboard]);
+OriginalSwiper.use([Navigation, Pagination, Autoplay, Virtual, Lazy, Keyboard, EffectFade]);
 
 export type SwiperInstance = OriginalSwiper;