송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
3b2d547e 1 parent cdeb05a3

check

Expand all
Inline Side-by-side
Showing 12 changed files with 356 additions and 36 deletions
1 +<!DOCTYPE html>
2 +<html lang="en" >
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CodePen - Demo: CSS scroll down button</title>
6 + <link rel="stylesheet" href="./style.css">
7 +
8 + <!-- 메세지 버블 -->
9 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 +
11 +</head>
12 +<body>
13 +<!-- partial:index.partial.html -->
14 +
15 +<!-- 배경 스크롤 -->
16 + <section id="section01" class="demo">
17 + <h1 class="animated fadeOutUp">Emoji Human, Who are you?</h1>
18 + <h2 class="animated fadeOutUp">이모지 인간의 정체가 궁금해요.</h2>
19 + <h3 class="animated2 fadeIn">이모지일까요, 인간일까요?<br>
20 + 직접 대화하면서 차근차근 알아가봅시다!</h3>
21 + <a href="#section02"><span></span></a>
22 + </section>
23 +
24 +
25 + <section id="section02" class="demo">
26 + <!-- 1번 대화 -->
27 + <section>
28 + <br>
29 + <br>
30 + <br>
31 + <br>
32 + <br>
33 + <br>
34 + <br>
35 + <br>
36 + <br>
37 + <br>
38 + <div class="from-them">
39 + <p>안녕하세요!!<br>
40 + 저는 이모지 인간이라고 해요 @.@ <br>
41 + 당신을 만나게 되어서 매우 반가워요 :)
42 + </p>
43 + </div>
44 + <div class="clear"></div>
45 +
46 + <div class="from-me slam">
47 + <p>말풍선을 눌러 이모지 인간에게 인사하기</p>
48 + </div>
49 + <div class="clear"></div>
50 + </section>
51 + <!-- 1번 대화 -->
52 + </section>
53 +
54 +
55 + <section id="section03" class="demo">
56 + <!-- 2번 대화 -->
57 + <section>
58 + <div class="from-me gentle">
59 + <p>이모지 인간은 뭔가요...?</p>
60 + </div>
61 + <div class="clear"></div>
62 +
63 + <div class="from-them">
64 + <p>이모지 인간은 말그대로
65 + “이모지”로 이루어진 인격체입니다.
66 + 여러분이 알고 계시는 다양한 이모지들이 있죠?
67 + 저는 그 어떤 모습의 이모지든 다 될 수 있어요.
68 + 이모지 자체가 저의 몸이라고 생각하시면 됩니다.
69 + 예를 들어, 옆의 태양이나 파라솔까지도요!
70 + (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
71 + </div>
72 + </section>
73 + <!-- 2번 대화 -->
74 + </section>
75 +
76 + <section id="section04" class="demo">
77 + <!-- 3번 대화 -->
78 + <section>
79 + <div class="from-me gentle">
80 + <p>어...이모지 인간은 어떻게 생겨났나요?</p>
81 + </div>
82 + <div class="clear"></div>
83 +
84 + <div class="from-them">
85 + <p>요즘 10대-20대들은 SNS 사용시,
86 + 주로 이모지를 사용하여 대화를 하곤 합니다.
87 + 문자로 길게 설명을 하는 것보다 표정이나 감정들을
88 + 직관적으로 전달할 수 있는 이모지가
89 + 더 간편하기에 그렇습니다.
90 + 이에 현대인들의 일상은 이모지로 가득 찬,
91 + “<이모지 인간>이 아닐까”
92 + 하는 발상에서 제가 생겨나게 되었답니다.</p>
93 + </div>
94 + </section>
95 + <!-- 3번 대화 -->
96 + </section>
97 +
98 + <section id="section05" class="demo">
99 + <!-- 4번 대화 -->
100 + <section>
101 + <div class="from-me gentle">
102 + <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
103 + </div>
104 + <div class="clear"></div>
105 +
106 + <div class="from-them">
107 + <p>첫째, 저와의 간단한 대화!
108 + 둘째, 이모지로 보내는 문자!
109 + 셋째, 이모지 MBTI 카드!</p>
110 + </div>
111 + <br>
112 + <br>
113 + <br>
114 + <br>
115 + <br>
116 + <br>
117 + <br>
118 + <br>
119 + <br>
120 + <br>
121 + <br>
122 + <br>
123 + <div class="from-them">
124 + <p>첫번째...보다는
125 + 두번째와 세번째에 대한 설명을 더 해볼께요...
126 + 이모지로 보내는 문자는 Emo-ssage라고 해요.
127 + 아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
128 + 대화 중 일부를 이모지로 채워줄 거랍니다.
129 + 작성이 완료되면 여러분만의 emo-ssage를
130 + 이미지로 저장할 수 있어요!</p>
131 + </div>
132 + <br>
133 + <br>
134 + <br>
135 + <br>
136 + <br>
137 + <br>
138 + <br>
139 + <br>
140 + <br>
141 + <br>
142 + <br>
143 + <br>
144 + <br>
145 + <br>
146 + <br>
147 + <br>
148 + <br>
149 + <br>
150 + <br>
151 + <br>
152 + <br>
153 + <br>
154 + <br>
155 + <br>
156 + <div class="from-them">
157 + <p>이모지 MBTI 카드는 EMOTI라고 해요.
158 + 여러 이모지들을 활용해서 각 16개 mbti
159 + 고유의 이모지들을 탄생시켰어요.
160 + 아, 그리고 각 mbti 카드를 넘길 때마다
161 + 어울리는 노래도 흘러나온답니다! </p>
162 + </div>
163 + </section>
164 + <!-- 4번 대화 -->
165 + </section>
166 +
167 + <section id="section06" class="demo">
168 + <!-- 5번 대화 -->
169 + <section>
170 + <div class="from-me gentle">
171 + <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
172 + </div>
173 + <div class="clear"></div>
174 +
175 + <div class="from-them">
176 + <p>This page cannot be found</p>
177 + </div>
178 + </section>
179 + <!-- 5번 대화 -->
180 + </section>
181 +
182 + <!-- partial -->
183 + <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
184 +<!-- 배경 스크롤 -->
185 +
186 + <!-- 메세지 버블 -->
187 + <script src="./script.js"></script>
188 +
189 +</body>
190 +</html>
1 +$(function() {
2 + $('a[href*=#]').on('click', function(e) {
3 + e.preventDefault();
4 + $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
5 + });
6 +});
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
...@@ -117,7 +117,7 @@ body { ...@@ -117,7 +117,7 @@ body {
117 } 117 }
118 @media (min-width: 800px) { 118 @media (min-width: 800px) {
119 .page-content { 119 .page-content {
120 - grid-template-columns: repeat(4, 1fr); 120 + grid-template-columns: repeat(3, 1fr);
121 } 121 }
122 } 122 }
123 123
...@@ -329,6 +329,7 @@ body { ...@@ -329,6 +329,7 @@ body {
329 font-family: Noto Sans KR; 329 font-family: Noto Sans KR;
330 text-align: center; 330 text-align: center;
331 } 331 }
332 +
332 /* 텍스트 */ 333 /* 텍스트 */
333 334
334 335
......
...@@ -20,16 +20,19 @@ ...@@ -20,16 +20,19 @@
20 <!-- 내비게이션 --> 20 <!-- 내비게이션 -->
21 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 21 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
22 <!--css link--> 22 <!--css link-->
23 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 23 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
24 + <!--for icons-->
24 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script--> 25 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
25 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 26 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
26 27
27 <body id="page-top"> 28 <body id="page-top">
28 <!--creating a navigation bar--> 29 <!--creating a navigation bar-->
29 - <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom--> 30 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom">
31 + <!--navigation bar with default view fixed on top specific class nav-bar custom-->
30 <div class="container"><!--gives padding of 16px on LHS and RHS--> 32 <div class="container"><!--gives padding of 16px on LHS and RHS-->
31 <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll --> 33 <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
32 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 34 + <button type="button" class="navbar-toggle" data-toggle="collapse"
35 + data-target="#bs-example-navbar-collapse-1">
33 <span></span> Menu <i class="fa fa-bars"></i> 36 <span></span> Menu <i class="fa fa-bars"></i>
34 </button> 37 </button>
35 </div><!--end of button--> 38 </div><!--end of button-->
...@@ -37,7 +40,8 @@ ...@@ -37,7 +40,8 @@
37 <ul class="nav navbar-nav"> 40 <ul class="nav navbar-nav">
38 <li><a href="/index.html">Home</a></li> 41 <li><a href="/index.html">Home</a></li>
39 </ul> 42 </ul>
40 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page--> 43 + <ul class="nav navbar-nav navbar-right page-scroll">
44 + <!--second UL to go to right having proprty to scroll page-->
41 <li> <a href="/About Us/About Us.html">About Us</a></li> 45 <li> <a href="/About Us/About Us.html">About Us</a></li>
42 <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li> 46 <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
43 <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li> 47 <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
...@@ -54,6 +58,15 @@ ...@@ -54,6 +58,15 @@
54 <div class="one"> 58 <div class="one">
55 59
56 <div class="wave"><span>👋</span></div> 60 <div class="wave"><span>👋</span></div>
61 + <br>
62 + <br>
63 + <br>
64 + <br>
65 + <br>
66 + <br>
67 + <br>
68 + <br>
69 + <br>
57 70
58 <p id="p1" class="animated fadeOutUp">Hello, Humans!</p> 71 <p id="p1" class="animated fadeOutUp">Hello, Humans!</p>
59 <br> 72 <br>
...@@ -130,7 +143,7 @@ ...@@ -130,7 +143,7 @@
130 143
131 <!-- 요소들 --> 144 <!-- 요소들 -->
132 <div style="float: left; width: 64%;"> 145 <div style="float: left; width: 64%;">
133 - <main class="page-content"> 146 + <main class="page-content" style="justify-content: end;">
134 <!-- 1번칸 --> 147 <!-- 1번칸 -->
135 <div class="card"> 148 <div class="card">
136 <div class="content"> 149 <div class="content">
...@@ -148,7 +161,7 @@ ...@@ -148,7 +161,7 @@
148 </div> 161 </div>
149 <!-- 2번칸 --> 162 <!-- 2번칸 -->
150 <div class="card"> 163 <div class="card">
151 - <<div class="content"> 164 + <div class="content">
152 <h2 class="title">Interest</h2> 165 <h2 class="title">Interest</h2>
153 <p class="copy">현재 관심 분야는 166 <p class="copy">현재 관심 분야는
154 3D, 167 3D,
...@@ -180,14 +193,12 @@ ...@@ -180,14 +193,12 @@
180 (ex : 개발...) 193 (ex : 개발...)
181 194
182 이렇게 탄생한 195 이렇게 탄생한
183 - >>>이모지 인간<<< 196 + >>>이모지 인간<<< 재밌게 즐겨주시길 바라요! </p>
184 - 재밌게 즐겨주시길 197 + </div>
185 - 바라요!
186 -
187 - </p>
188 </div> 198 </div>
189 </main> 199 </main>
190 </div> 200 </div>
201 +
191 <!-- 요소들 --> 202 <!-- 요소들 -->
192 203
193 <div style="float: left; width: 36%;"> 204 <div style="float: left; width: 36%;">
...@@ -198,5 +209,6 @@ ...@@ -198,5 +209,6 @@
198 </div> 209 </div>
199 <!-- 3페이지 --> 210 <!-- 3페이지 -->
200 211
201 -</body> 212 + </body>
213 +
202 </html> 214 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,9 +2,13 @@ ...@@ -2,9 +2,13 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <meta charset="UTF-8">
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 + <meta name="viewport" content="width=device-width, initial-scale=1">
8 + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
5 <title>EMOJI-HUMAN</title> 9 <title>EMOJI-HUMAN</title>
6 - <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css"> 10 + <link rel="stylesheet" href="/index.css">
7 - <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 11 + <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
8 <style> 12 <style>
9 body { 13 body {
10 background-image: url("emossage-03.png"); 14 background-image: url("emossage-03.png");
...@@ -13,10 +17,22 @@ ...@@ -13,10 +17,22 @@
13 font-family: Noto Sans KR, regular; 17 font-family: Noto Sans KR, regular;
14 text-align: center; 18 text-align: center;
15 } 19 }
16 - h1 {font-size: 50px;} 20 +
17 - p1 {font-size: 24px;} 21 + h1 {
18 - p2 {font-size: 14px} 22 + font-size: 50px;
19 - p2.small {line-height: 0.7;} 23 + }
24 +
25 + p1 {
26 + font-size: 24px;
27 + }
28 +
29 + p2 {
30 + font-size: 14px
31 + }
32 +
33 + p2.small {
34 + line-height: 0.7;
35 + }
20 </style> 36 </style>
21 <div style="height: 100px; overflow: auto"> 37 <div style="height: 100px; overflow: auto">
22 </div> 38 </div>
...@@ -33,7 +49,8 @@ ...@@ -33,7 +49,8 @@
33 <br> 49 <br>
34 <p2> 50 <p2>
35 <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br> 51 <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
36 - 여러분만의 이모지 편지를 적어보세요<br> </p2> 52 + 여러분만의 이모지 편지를 적어보세요<br>
53 + </p2>
37 </p> 54 </p>
38 </header> 55 </header>
39 56
...@@ -59,13 +76,24 @@ ...@@ -59,13 +76,24 @@
59 </label> 76 </label>
60 77
61 <div> 78 <div>
62 - <textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea> 79 + <textarea id="input" class="h-350" name="text_1" spellcheck="true" rows="10" cols="50" tabindex="4" placeholder="이모지로 변환할 문장을 입력해주세요"></textarea>
63 </div> 80 </div>
64 81
65 <div> 82 <div>
66 - <input id="saveForm" name="saveForm" type="submit" value="Submit"> 83 + <div id="checkPlag" class="btn" onclick="updateOutput()" style="margin: 0 auto;display: block;margin-top: 10px;cursor:pointer; box-sizing:border-box;width:250px">Generate</div>
84 + </div>
85 + </div>
86 +
87 + <div>
88 + <label class="result" id="title5" for="Field5">
89 + Emo-ssage
90 + </label>
91 +
92 + <div>
93 + <div id="output" class="h=350" name="text_2" style="font-family: Arial, Helvetica, sans-serif; overflow-y: auto;max-height: 350px;"></p>
67 </div> 94 </div>
68 </div> 95 </div>
96 + <script src="/EMO-SSAGE/emossage.js"/>
69 97
70 </form> 98 </form>
71 99
......
This diff could not be displayed because it is too large.
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 7
8 .swiper-container { 8 .swiper-container {
9 width: 100%; 9 width: 100%;
10 - height: 70%; 10 + height: auto;
11 } 11 }
12 12
13 .swiper-slide { 13 .swiper-slide {
...@@ -427,3 +427,87 @@ body { ...@@ -427,3 +427,87 @@ body {
427 background-repeat: no-repeat; 427 background-repeat: no-repeat;
428 } 428 }
429 /* 그라디언트 배경 */ 429 /* 그라디언트 배경 */
430 +
431 +
432 +
433 +
434 +
435 +/* text fade in */
436 +@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
437 +
438 +.animated{
439 + -webkit-animation-fill-mode:both;
440 + -webkit-animation-duration:2s;
441 + animation-duration:2s;
442 +}
443 +.animated2{
444 + animation-delay:.5s;
445 + -webkit-animation-delay:.5s;
446 + -webkit-animation-fill-mode:both;
447 + -webkit-animation-duration:2s;
448 + animation-duration:2s;
449 +}
450 +@-webkit-keyframes fadeOutUp {
451 + 0% {
452 + opacity: 0;
453 + -webkit-transform: translateY(1);
454 + -webkit-transform: translateY(40px);
455 + } 100% {
456 + opacity: 1;
457 + }
458 +}
459 +
460 +.fadeOutUp {
461 + -webkit-animation-name: fadeOutUp;
462 + animation-name: fadeOutUp;
463 +}
464 +
465 +.fadeIn {
466 + -webkit-animation-name: fadeIn;
467 + animation-name: fadeIn;
468 +}
469 +
470 +@-webkit-keyframes fadeIn {
471 + 0%{
472 + opacity: 0;
473 + -webkit-transform: translateY(1);
474 + -webkit-transform: translateY(40px);
475 + }
476 + 100% {
477 + opacity: 1;
478 + }
479 +}
480 +/* text fade in */
481 +
482 +
483 +
484 +
485 +
486 +
487 +/* 텍스트 */
488 +#p1 {
489 + font-size: 50px;
490 + color: rgb(0, 0, 0);
491 + font-family: Noto Sans KR;
492 + text-align: center;
493 +}
494 +#p2{
495 + font-size: 20px;
496 + color: rgb(0, 0, 0);
497 + font-family: Noto Sans KR;
498 + text-align: center;
499 +}
500 +#p3{
501 + font-size: 15px;
502 + color: rgb(0, 0, 0);
503 + font-family: Noto Sans KR;
504 + text-align: center;
505 +}
506 +#p4{
507 + font-size: 15px;
508 + color: rgb(0, 0, 0);
509 + font-family: Noto Sans KR;
510 + text-align: center;
511 +}
512 +
513 +/* 텍스트 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
46 </nav> 46 </nav>
47 <!-- 내비게이션 --> 47 <!-- 내비게이션 -->
48 48
49 +
49 <br> 50 <br>
50 <br> 51 <br>
51 <br> 52 <br>
...@@ -53,22 +54,19 @@ ...@@ -53,22 +54,19 @@
53 <br> 54 <br>
54 <br> 55 <br>
55 <br> 56 <br>
57 + <p id="p1" class="animated fadeOutUp">MBTI+EMOJI=EMOTI</p>
56 <br> 58 <br>
59 + <p id="p2" class="animated fadeOutUp">MBTI가 이모지라면? 그건 바로 EMOTI!</p>
60 +
57 <br> 61 <br>
58 <br> 62 <br>
59 <br> 63 <br>
64 + <p id="p3" class="animated2 fadeIn">당신의 MBTI가 이모지로 어떻게 바뀌었을지</p>
65 + <p id="p4" class="animated2 fadeIn">아래의 카드에서 한 번 찾아보세요!</p>
60 <br> 66 <br>
61 <br> 67 <br>
62 <br> 68 <br>
63 - <br> 69 +
64 - <br>
65 - <br>
66 - <br>
67 - <br>
68 - <br>
69 - <br>
70 - <br>
71 - <br>
72 <br> 70 <br>
73 71
74 <div class="swiper-container"> 72 <div class="swiper-container">
......
...@@ -18,6 +18,7 @@ const audios = [ ...@@ -18,6 +18,7 @@ const audios = [
18 document.getElementById("enfj_audio"), 18 document.getElementById("enfj_audio"),
19 ]; 19 ];
20 const numMbtis = 16; 20 const numMbtis = 16;
21 +const slidesPerView = 5;
21 22
22 /* ======== 23 /* ========
23 Debugger plugin, simple demo plugin to console.log some of callbacks 24 Debugger plugin, simple demo plugin to console.log some of callbacks
...@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) { ...@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) {
48 console.log('sliderMove'); 49 console.log('sliderMove');
49 }); 50 });
50 on('slideChange', () => { 51 on('slideChange', () => {
51 - audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].pause(); 52 + audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].pause();
52 - audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].currentTime = 0; 53 + audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].currentTime = 0;
53 - audios[(swiper.activeIndex + numMbtis - 5) % numMbtis].play(); 54 + audios[(swiper.activeIndex + numMbtis - slidesPerView) % numMbtis].play();
54 if (!swiper.params.debugger) return; 55 if (!swiper.params.debugger) return;
55 console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex); 56 console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex);
56 }); 57 });
...@@ -92,7 +93,7 @@ Swiper.use([myPlugin]); ...@@ -92,7 +93,7 @@ Swiper.use([myPlugin]);
92 let swiper = new Swiper('.swiper-container', { 93 let swiper = new Swiper('.swiper-container', {
93 loop: true, 94 loop: true,
94 centeredSlides: true, 95 centeredSlides: true,
95 - slidesPerView: '5', 96 + slidesPerView: slidesPerView,
96 navigation: { 97 navigation: {
97 nextEl: '.swiper-button-next', 98 nextEl: '.swiper-button-next',
98 prevEl: '.swiper-button-prev', 99 prevEl: '.swiper-button-prev',
......