From a276a2bd42f60fb3ce5af8f1b3eda071b72db785 Mon Sep 17 00:00:00 2001
From: john015 <lsw0150305@gmail.com>
Date: Wed, 1 Jul 2020 16:30:41 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20swiper=EC=97=90=20fade=20effect?=
 =?UTF-8?q?=EB=A5=BC=20=EC=A0=81=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88?=
 =?UTF-8?q?=EA=B2=8C=20=ED=95=9C=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/Swiper.mdx      | 22 ++++++++++++++++++++++
 src/components/Swiper/index.tsx |  8 ++++----
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/docs/components/Swiper.mdx b/docs/components/Swiper.mdx
index 470b6382..41fa7812 100644
--- 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
index 05453716..c3218563 100644
--- 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;