{"id":856,"date":"2026-06-26T13:39:03","date_gmt":"2026-06-26T13:39:03","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=856"},"modified":"2026-06-26T13:39:03","modified_gmt":"2026-06-26T13:39:03","slug":"swiper","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=856","title":{"rendered":"swiper"},"content":{"rendered":"<h2>1. Swiper\ub780?<\/h2>\n<blockquote>\n<p><strong>Note<\/strong>: <a href=\"https:\/\/swiperjs.com\/\">Swiper \uacf5\uc2dd \uc0ac\uc774\ud2b8<\/a><br \/>\n<LinkButton  icon=\"download\" href=\"https:\/\/qwerewqwerew.github.io\/source\/files\/videos.zip\"><br \/>\n  \ud30c\uc77c\ub2e4\uc6b4\ub85c\ub4dc<br \/>\n<\/LinkButton><br \/>\nSwiper\ub294 \ud130\uce58 \uc2ac\ub77c\uc774\ub354 \ub77c\uc774\ube0c\ub7ec\ub9ac. \ubaa8\ubc14\uc77c\uacfc \ub370\uc2a4\ud06c\ud1b1 \ubaa8\ub450 \uc9c0\uc6d0.<\/p>\n<\/blockquote>\n<p><strong>\uc8fc\uc694 \ud2b9\uc9d5:<\/strong><\/p>\n<ul>\n<li>\ud130\uce58\/\ub4dc\ub798\uadf8 \uc9c0\uc6d0<\/li>\n<li>\ubc18\uc751\ud615 \ub514\uc790\uc778<\/li>\n<li>\ub2e4\uc591\ud55c \ud6a8\uacfc (fade, cube, flip \ub4f1)<\/li>\n<li>\ub124\ube44\uac8c\uc774\uc158, \ud398\uc774\uc9c0\ub124\uc774\uc158 \uc9c0\uc6d0<\/li>\n<\/ul>\n<h2>2. \uc124\uce58<\/h2>\n<h3>2.1. CDN<\/h3>\n<pre><code class=\"language-html\">\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css&quot; \/&gt;\n\n\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js&quot;&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<h3>2.2. NPM<\/h3>\n<pre><code class=\"language-bash\">npm install swiper\n<\/code><\/pre>\n<hr>\n<h2>3. \uae30\ubcf8 \uad6c\uc870<\/h2>\n<p>:::tip[\ud544\uc218 \uad6c\uc870]<br \/>\n\uc2ac\ub77c\uc774\ub4dc\ub294 \ubc18\ub4dc\uc2dc \ub450 \ub2e8\uacc4\ub85c \uac10\uc2f8\uc57c \ud569\ub2c8\ub2e4.<br \/>\n:::<\/p>\n<h4>HTML<\/h4>\n<pre><code class=\"language-html\">\n&lt;div class=&quot;swiper&quot;&gt;\n  \n  &lt;div class=&quot;swiper-wrapper&quot;&gt;\n    \n    &lt;div class=&quot;swiper-slide&quot;&gt;\uc2ac\ub77c\uc774\ub4dc 1&lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\uc2ac\ub77c\uc774\ub4dc 2&lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\uc2ac\ub77c\uc774\ub4dc 3&lt;\/div&gt;\n  &lt;\/div&gt;\n\n  \n  &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;\/div&gt;\n\n  \n  &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;\/div&gt;\n  &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h4>CSS<\/h4>\n<pre><code class=\"language-css\">\/* \uc2ac\ub77c\uc774\ub354 \ud06c\uae30 \uc9c0\uc815 *\/\n.swiper {\n  width: 100%;\n  height: 400px;\n}\n<\/code><\/pre>\n<h4>JS<\/h4>\n<pre><code class=\"language-js\">\/\/ Swiper \ucd08\uae30\ud654\nconst swiper = new Swiper(&#39;.swiper&#39;);\n<\/code><\/pre>\n<hr>\n<h2>4. \uc8fc\uc694 \uc635\uc158<\/h2>\n<p><a href=\"https:\/\/swiperjs.com\/swiper-api#parameters\"><br \/>\nAPI<br \/>\n<\/a><\/p>\n<h4>\ud30c\ub77c\ubbf8\ud130<\/h4>\n<table>\n<thead>\n<tr>\n<th>\ud30c\ub77c\ubbf8\ud130<\/th>\n<th>\uc124\uba85<\/th>\n<th>\ud0c0\uc785\/\uac12 \uc608\uc2dc<\/th>\n<th>\uae30\ubcf8\uac12<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>loop<\/code><\/td>\n<td>\ubb34\ud55c \ubc18\ubcf5<\/td>\n<td><code>true<\/code> \/ <code>false<\/code><\/td>\n<td><code>false<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>autoplay<\/code><\/td>\n<td>\uc790\ub3d9 \uc7ac\uc0dd<\/td>\n<td><code>{ delay: 3000 }<\/code> \/ <code>false<\/code><\/td>\n<td><code>false<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>speed<\/code><\/td>\n<td>\uc804\ud658 \uc18d\ub3c4(ms)<\/td>\n<td><code>300<\/code>, <code>1000<\/code><\/td>\n<td><code>300<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>slidesPerView<\/code><\/td>\n<td>\ubcf4\uc5ec\uc904 \uc2ac\ub77c\uc774\ub4dc \uc218<\/td>\n<td><code>1<\/code>, <code>2<\/code>, <code>auto<\/code><\/td>\n<td><code>1<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>spaceBetween<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \uac04\uaca9(px)<\/td>\n<td><code>0<\/code>, <code>20<\/code><\/td>\n<td><code>0<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>direction<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \ubc29\ud5a5<\/td>\n<td><code>horizontal<\/code> \/ <code>vertical<\/code><\/td>\n<td><code>horizontal<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>effect<\/code><\/td>\n<td>\uc804\ud658 \ud6a8\uacfc<\/td>\n<td><code>slide<\/code>, <code>fade<\/code>, <code>cube<\/code> \ub4f1<\/td>\n<td><code>slide<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>centeredSlides<\/code><\/td>\n<td>\ud65c\uc131 \uc2ac\ub77c\uc774\ub4dc \uc911\uc559 \ubc30\uce58<\/td>\n<td><code>true<\/code> \/ <code>false<\/code><\/td>\n<td><code>false<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>autoHeight<\/code><\/td>\n<td>\uc790\ub3d9 \ub192\uc774 \uc870\uc808<\/td>\n<td><code>true<\/code> \/ <code>false<\/code><\/td>\n<td><code>false<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>pagination<\/code><\/td>\n<td>\ud398\uc774\uc9c0\ub124\uc774\uc158 \uc124\uc815<\/td>\n<td><code>{ el: &#39;.swiper-pagination&#39; }<\/code><\/td>\n<td>\uc5c6\uc74c<\/td>\n<\/tr>\n<tr>\n<td><code>navigation<\/code><\/td>\n<td>\uc774\uc804\/\ub2e4\uc74c \ubc84\ud2bc \uc124\uc815<\/td>\n<td><code>{ nextEl, prevEl }<\/code><\/td>\n<td>\uc5c6\uc74c<\/td>\n<\/tr>\n<tr>\n<td><code>breakpoints<\/code><\/td>\n<td>\ubc18\uc751\ud615 \uc124\uc815<\/td>\n<td><code>{ 640: {...}, ... }<\/code><\/td>\n<td>\uc5c6\uc74c<\/td>\n<\/tr>\n<tr>\n<td><code>on<\/code><\/td>\n<td>\uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec(\ucf5c\ubc31)<\/td>\n<td><code>{ slideChange: fn }<\/code><\/td>\n<td>\uc5c6\uc74c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>\uba54\uc11c\ub4dc<\/h4>\n<table>\n<thead>\n<tr>\n<th>Method<\/th>\n<th>\uc124\uba85<\/th>\n<th>\uc0ac\uc6a9 \uc608\uc2dc<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>slideNext()<\/code><\/td>\n<td>\ub2e4\uc74c \uc2ac\ub77c\uc774\ub4dc\ub85c \uc774\ub3d9<\/td>\n<td><code>swiper.slideNext()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>slidePrev()<\/code><\/td>\n<td>\uc774\uc804 \uc2ac\ub77c\uc774\ub4dc\ub85c \uc774\ub3d9<\/td>\n<td><code>swiper.slidePrev()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>slideTo(index, speed, runCallbacks)<\/code><\/td>\n<td>\ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9<\/td>\n<td><code>swiper.slideTo(3, 500)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>update()<\/code><\/td>\n<td>Swiper \uc5c5\ub370\uc774\ud2b8 (\ud06c\uae30\/\uc704\uce58 \uc7ac\uacc4\uc0b0)<\/td>\n<td><code>swiper.update()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>destroy(deleteInstance, cleanStyles)<\/code><\/td>\n<td>Swiper \uc778\uc2a4\ud134\uc2a4 \uc81c\uac70<\/td>\n<td><code>swiper.destroy(true)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>appendSlide(slides)<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \ucd94\uac00 (\ub9c8\uc9c0\ub9c9)<\/td>\n<td><code>swiper.appendSlide(&#39;&lt;div&gt;new&lt;\/div&gt;&#39;)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>prependSlide(slides)<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \ucd94\uac00 (\ucc98\uc74c)<\/td>\n<td><code>swiper.prependSlide(&#39;&lt;div&gt;new&lt;\/div&gt;&#39;)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>removeSlide(index)<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \uc81c\uac70<\/td>\n<td><code>swiper.removeSlide(2)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>removeAllSlides()<\/code><\/td>\n<td>\ubaa8\ub4e0 \uc2ac\ub77c\uc774\ub4dc \uc81c\uac70<\/td>\n<td><code>swiper.removeAllSlides()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>updateSlides()<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc\ub9cc \uc5c5\ub370\uc774\ud2b8<\/td>\n<td><code>swiper.updateSlides()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>updateProgress()<\/code><\/td>\n<td>\uc9c4\ud589 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8<\/td>\n<td><code>swiper.updateProgress()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>updateSlidesClasses()<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \ud074\ub798\uc2a4 \uc5c5\ub370\uc774\ud2b8<\/td>\n<td><code>swiper.updateSlidesClasses()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>disable()<\/code><\/td>\n<td>Swiper \ube44\ud65c\uc131\ud654<\/td>\n<td><code>swiper.disable()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>enable()<\/code><\/td>\n<td>Swiper \ud65c\uc131\ud654<\/td>\n<td><code>swiper.enable()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>detachEvents()<\/code><\/td>\n<td>\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \uc81c\uac70<\/td>\n<td><code>swiper.detachEvents()<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>attachEvents()<\/code><\/td>\n<td>\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 \ucd94\uac00<\/td>\n<td><code>swiper.attachEvents()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>\ud504\ub85c\ud37c\ud2f0<\/h4>\n<table>\n<thead>\n<tr>\n<th>Property<\/th>\n<th>\ud0c0\uc785<\/th>\n<th>\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>activeIndex<\/code><\/td>\n<td>number<\/td>\n<td>\ud604\uc7ac \ud65c\uc131 \uc2ac\ub77c\uc774\ub4dc \uc778\ub371\uc2a4<\/td>\n<\/tr>\n<tr>\n<td><code>realIndex<\/code><\/td>\n<td>number<\/td>\n<td>\uc2e4\uc81c \uc2ac\ub77c\uc774\ub4dc \uc778\ub371\uc2a4 (loop \ubaa8\ub4dc\uc5d0\uc11c \uc720\uc6a9)<\/td>\n<\/tr>\n<tr>\n<td><code>previousIndex<\/code><\/td>\n<td>number<\/td>\n<td>\uc774\uc804 \uc2ac\ub77c\uc774\ub4dc \uc778\ub371\uc2a4<\/td>\n<\/tr>\n<tr>\n<td><code>isBeginning<\/code><\/td>\n<td>boolean<\/td>\n<td>\uccab \ubc88\uc9f8 \uc2ac\ub77c\uc774\ub4dc \uc5ec\ubd80<\/td>\n<\/tr>\n<tr>\n<td><code>isEnd<\/code><\/td>\n<td>boolean<\/td>\n<td>\ub9c8\uc9c0\ub9c9 \uc2ac\ub77c\uc774\ub4dc \uc5ec\ubd80<\/td>\n<\/tr>\n<tr>\n<td><code>slides<\/code><\/td>\n<td>array<\/td>\n<td>\ubaa8\ub4e0 \uc2ac\ub77c\uc774\ub4dc \uc694\uc18c \ubc30\uc5f4<\/td>\n<\/tr>\n<tr>\n<td><code>width<\/code><\/td>\n<td>number<\/td>\n<td>Swiper \ucee8\ud14c\uc774\ub108 \ub108\ube44<\/td>\n<\/tr>\n<tr>\n<td><code>height<\/code><\/td>\n<td>number<\/td>\n<td>Swiper \ucee8\ud14c\uc774\ub108 \ub192\uc774<\/td>\n<\/tr>\n<tr>\n<td><code>params<\/code><\/td>\n<td>object<\/td>\n<td>Swiper \ucd08\uae30\ud654 \ud30c\ub77c\ubbf8\ud130<\/td>\n<\/tr>\n<tr>\n<td><code>el<\/code><\/td>\n<td>HTMLElement<\/td>\n<td>Swiper \ucee8\ud14c\uc774\ub108 \uc694\uc18c<\/td>\n<\/tr>\n<tr>\n<td><code>wrapperEl<\/code><\/td>\n<td>HTMLElement<\/td>\n<td>Swiper wrapper \uc694\uc18c<\/td>\n<\/tr>\n<tr>\n<td><code>navigation<\/code><\/td>\n<td>object<\/td>\n<td>Navigation \ubaa8\ub4c8 \uc778\uc2a4\ud134\uc2a4<\/td>\n<\/tr>\n<tr>\n<td><code>pagination<\/code><\/td>\n<td>object<\/td>\n<td>Pagination \ubaa8\ub4c8 \uc778\uc2a4\ud134\uc2a4<\/td>\n<\/tr>\n<tr>\n<td><code>scrollbar<\/code><\/td>\n<td>object<\/td>\n<td>Scrollbar \ubaa8\ub4c8 \uc778\uc2a4\ud134\uc2a4<\/td>\n<\/tr>\n<tr>\n<td><code>autoplay<\/code><\/td>\n<td>object<\/td>\n<td>Autoplay \ubaa8\ub4c8 \uc778\uc2a4\ud134\uc2a4<\/td>\n<\/tr>\n<tr>\n<td><code>touches<\/code><\/td>\n<td>object<\/td>\n<td>\ud130\uce58 \uc815\ubcf4<\/td>\n<\/tr>\n<tr>\n<td><code>translate<\/code><\/td>\n<td>number<\/td>\n<td>\ud604\uc7ac translate \uac12<\/td>\n<\/tr>\n<tr>\n<td><code>progress<\/code><\/td>\n<td>number<\/td>\n<td>\uc804\uccb4 \uc9c4\ud589\ub960 (0-1)<\/td>\n<\/tr>\n<tr>\n<td><code>allowSlideNext<\/code><\/td>\n<td>boolean<\/td>\n<td>\ub2e4\uc74c \uc2ac\ub77c\uc774\ub4dc \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80<\/td>\n<\/tr>\n<tr>\n<td><code>allowSlidePrev<\/code><\/td>\n<td>boolean<\/td>\n<td>\uc774\uc804 \uc2ac\ub77c\uc774\ub4dc \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80<\/td>\n<\/tr>\n<tr>\n<td><code>allowTouchMove<\/code><\/td>\n<td>boolean<\/td>\n<td>\ud130\uce58 \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>\uc774\ubca4\ud2b8<\/h4>\n<table>\n<thead>\n<tr>\n<th>Event<\/th>\n<th>\uc124\uba85<\/th>\n<th>\uc0ac\uc6a9 \uc608\uc2dc<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>init<\/code><\/td>\n<td>\ucd08\uae30\ud654 \uc644\ub8cc<\/td>\n<td><code>on: { init: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>slideChange<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \ubcc0\uacbd \uc2dc<\/td>\n<td><code>on: { slideChange: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>slideChangeTransitionStart<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \uc804\ud658 \uc2dc\uc791<\/td>\n<td><code>on: { slideChangeTransitionStart: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>slideChangeTransitionEnd<\/code><\/td>\n<td>\uc2ac\ub77c\uc774\ub4dc \uc804\ud658 \uc644\ub8cc<\/td>\n<td><code>on: { slideChangeTransitionEnd: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>reachBeginning<\/code><\/td>\n<td>\ucc98\uc74c \ub3c4\ub2ec<\/td>\n<td><code>on: { reachBeginning: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>reachEnd<\/code><\/td>\n<td>\ub05d \ub3c4\ub2ec<\/td>\n<td><code>on: { reachEnd: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>click<\/code><\/td>\n<td>\ud074\ub9ad \uc2dc<\/td>\n<td><code>on: { click: (swiper, e) =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>tap<\/code><\/td>\n<td>\ud0ed \uc2dc<\/td>\n<td><code>on: { tap: (swiper, e) =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>touchStart<\/code><\/td>\n<td>\ud130\uce58 \uc2dc\uc791<\/td>\n<td><code>on: { touchStart: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>touchEnd<\/code><\/td>\n<td>\ud130\uce58 \uc885\ub8cc<\/td>\n<td><code>on: { touchEnd: () =&gt; {} }<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>6. \ub2e8\uacc4\ubcc4 \uc608\uc81c<\/h2>\n<h3>6.1. STEP 1: \uae30\ubcf8 \uc2ac\ub77c\uc774\ub354<\/h3>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/01-basic-slider.html\">\ubbf8\ub9ac\ubcf4\uae30 \u25b6 <\/a><\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;\uae30\ubcf8 Swiper&lt;\/title&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css&quot;&gt;\n  &lt;style&gt;\n    .swiper {\n      width: 100%;\n      height: 300px;\n    }\n    .swiper-slide {\n      background: #eee;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 24px;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;swiper&quot;&gt;\n    &lt;div class=&quot;swiper-wrapper&quot;&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;1&lt;\/div&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;2&lt;\/div&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;3&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;script&gt;\n    const swiper = new Swiper(&#39;.swiper&#39;, {\n      loop: true\n    });\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>6.2. STEP 2: \ub124\ube44\uac8c\uc774\uc158 &amp; \ud398\uc774\uc9c0\ub124\uc774\uc158 \ucd94\uac00<\/h3>\n<p>:::tip[\ud544\uc218 \uad6c\uc870]<br \/>\n <code>.swiper-pagination<\/code>, <code>.swiper-button-prev<\/code>, <code>.swiper-button-next<\/code> \ub294 \ubc18\ub4dc\uc2dc <code>.swiper-wrapper<\/code> \uc640 \ud615\uc81c\uc694\uc18c\ub85c \uc0bd\uc785 \ud569\ub2c8\ub2e4.<br \/>\n:::<\/p>\n<pre><code class=\"language-html\">  &lt;div class=&quot;swiper&quot;&gt;\n    &lt;div class=&quot;swiper-wrapper&quot;&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;1&lt;\/div&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;2&lt;\/div&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;3&lt;\/div&gt;\n    &lt;\/div&gt;\n    \n    \n    &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;\/div&gt;\n    \n    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;script&gt;\n    const swiper = new Swiper(&#39;.swiper&#39;, {\n      loop: true,\n      \/\/ \ud398\uc774\uc9c0\ub124\uc774\uc158 \uc124\uc815\n      pagination: {\n        el: &#39;.swiper-pagination&#39;,\n        clickable: true\n      },\n      \/\/ \ub124\ube44\uac8c\uc774\uc158 \uc124\uc815\n      navigation: {\n        nextEl: &#39;.swiper-button-next&#39;,\n        prevEl: &#39;.swiper-button-prev&#39;\n      }\n    });\n  &lt;\/script&gt;\n<\/code><\/pre>\n<h3>6.3. STEP 3: \uc790\ub3d9 \uc7ac\uc0dd<\/h3>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/02-autoplay-slider.html\">\ubbf8\ub9ac\ubcf4\uae30 \u25b6 <\/a><\/p>\n<pre><code class=\"language-js\">const swiper = new Swiper(&#39;.swiper&#39;, {\n  loop: true,\n  autoplay: {\n    delay: 3000,              \/\/ 3\ucd08\ub9c8\ub2e4 \uc804\ud658\n    disableOnInteraction: false,\/\/ \uc0ac\uc6a9\uc790 \uc870\uc791 \ud6c4\uc5d0\ub3c4 \uc790\ub3d9\uc7ac\uc0dd \uc720\uc9c0\n    pauseOnMouseEnter: true     \/\/ \ub9c8\uc6b0\uc2a4 \uc62c\ub9ac\uba74 \uc77c\uc2dc \uc815\uc9c0 (\ud575\uc2ec \uc124\uc815)\n  },\n  pagination: {\n    el: &#39;.swiper-pagination&#39;,\n    clickable: true\n  }\n});\n<\/code><\/pre>\n<hr>\n<h3>6.4. STEP 4: \uc5ec\ub7ec \uc2ac\ub77c\uc774\ub4dc \ubcf4\uc774\uae30<\/h3>\n<pre><code class=\"language-js\">const swiper = new Swiper(&#39;.swiper&#39;, {\n  slidesPerView: 3,    \/\/ \ud55c \ubc88\uc5d0 3\uac1c \ubcf4\uc774\uae30\n  spaceBetween: 20,    \/\/ \uc2ac\ub77c\uc774\ub4dc \uac04\uaca9 20px\n  centeredSlides: true, \/\/ \ud65c\uc131 \uc2ac\ub77c\uc774\ub4dc \uc911\uc559 \ubc30\uce58\n  loop: true\n});\n<\/code><\/pre>\n<h3>6.5. STEP 5: \ubc18\uc751\ud615 \uc124\uc815<\/h3>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/03-responsive-slider.html\">\ubbf8\ub9ac\ubcf4\uae30 \u25b6 <\/a><\/p>\n<pre><code class=\"language-js\">const swiper = new Swiper(&#39;.swiper&#39;, {\n  slidesPerView: 1,  \/\/ \uae30\ubcf8 (\ubaa8\ubc14\uc77c)\n  spaceBetween: 10,\n\n  \/\/ \ud654\uba74 \ud06c\uae30\ubcc4 \uc124\uc815\n  breakpoints: {\n    \/\/ 640px \uc774\uc0c1\n    640: {\n      slidesPerView: 2,\n      spaceBetween: 20\n    },\n    \/\/ 768px \uc774\uc0c1\n    768: {\n      slidesPerView: 3,\n      spaceBetween: 30\n    },\n    \/\/ 1024px \uc774\uc0c1\n    1024: {\n      slidesPerView: 4,\n      spaceBetween: 40\n    }\n  }\n});\n<\/code><\/pre>\n<hr>\n<h3>6.6. \uae30\ud0c0 \uc608\uc81c<\/h3>\n<ul>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/05-thumbnail-gallery.html\">\ubbf8\ub9ac\ubcf4\uae30 thumbnail \u25b6 <\/a><\/li>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/07-cube-effect.html\">\ubbf8\ub9ac\ubcf4\uae30 cube \u25b6 <\/a><\/li>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/08-coverflow-effect.html\">\ubbf8\ub9ac\ubcf4\uae30 coverflow \u25b6 <\/a><\/li>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/09-product-showcase.html\">\ubbf8\ub9ac\ubcf4\uae30 showcase \u25b6 <\/a><\/li>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/10-card-slider.html\">\ubbf8\ub9ac\ubcf4\uae30 card \u25b6 <\/a><\/li>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/11-fullscreen-slider.html\">\ubbf8\ub9ac\ubcf4\uae30 fullscreen \u25b6 <\/a><\/li>\n<\/ul>\n<h2>7. \uc774\ubbf8\uc9c0 \uac24\ub7ec\ub9ac \uc608\uc81c<\/h2>\n<blockquote>\n<p>swiper\ub97c \uc774\uc6a9\ud574 \uc774\ubbf8\uc9c0\uac24\ub7ec\ub9ac\ub97c \uc81c\uc791\ud55c\ub2e4.<br \/>\n\uac00\ub85c 820\ud53d\uc140 \uc774\ubbf8\uc9c0 8 \uc7a5\uc744 \uc900\ube44\ud558\uace0 Swiper\ub97c \uc774\uc6a9\ud574\uc11c 3\uac1c\uc758 \uc774\ubbf8\uc9c0\uac00 \ubcf4\uc5ec\uc9c0\uba70 \ud398\uc774\uc9c0 \uc774\ub3d9\uacfc \uc774\uc804, \ub2e4\uc74c \ubc84\ud2bc\uc744 \uc774\uc6a9\ud574 \uc774\ubbf8\uc9c0\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\ub3c4\ub85d \uc81c\uc791<\/p>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/2.html\">\ubbf8\ub9ac\ubcf4\uae30 \u25b6<\/a><\/p>\n<\/blockquote>\n<h3>7.1. STEP1<\/h3>\n<h4>HTML<\/h4>\n<pre><code>+ reset.css \uc640 \uc2a4\uc640\uc774\ud37c\ub97c \uc124\uce58\ud55c\ub2e4\n  ```html\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&quot; \/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/reset-css@5.0.1\/reset.min.css&quot; \/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css&quot; \/&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js&quot; defer&gt;&lt;\/script&gt;\n  ```\n+ section \ud0dc\uadf8 \uc790\uc2dd\uc694\uc18c\ub85c div \ub97c \ub9cc\ub4e4\uace0 \uc790\uc2dd\uc694\uc18c\ub85c \uc2a4\uc640\uc774\ud37c \uc694\uc18c\ub97c \ucd94\uac00\ud55c\ub2e4. \uc2a4\uc640\uc774\ud37c\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud074\ub798\uc2a4\uc774\ub984\uc740 \ubcc0\uacbd\ud558\uc9c0 \uc54a\uace0 \uadf8\ub300\ub85c \uc0ac\uc6a9\ud55c\ub2e4. \uc2a4\uc640\uc774\ud37c\uc758 \ubd80\ubaa8\uc694\uc18c\uc778 section\uacfc div \ub294 \ud544\uc694\uc5d0 \ub530\ub77c \ubcc0\uacbd\ud574\uc11c \uc0ac\uc6a9\ud558\uba74\ub41c\ub2e4.\n  ```html\n    &lt;section class=&quot;notice&quot;&gt;\n    &lt;div class=&quot;promotion&quot;&gt;\n      &lt;div class=&quot;swiper-container&quot;&gt;\n        &lt;div class=&quot;swiper-wrapper&quot;&gt;\n          &lt;div class=&quot;swiper-slide&quot;&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;swiper-prev&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;swiper-next&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/section&gt;\n  ```\n+ section \ud0dc\uadf8 \uc790\uc2dd\uc694\uc18c\ub85c div \ub97c \ub9cc\ub4e4\uace0 \uc790\uc2dd\uc694\uc18c\ub85c \uc2a4\uc640\uc774\ud37c \uc694\uc18c\ub97c \ucd94\uac00\ud55c\ub2e4. \uc2a4\uc640\uc774\ud37c\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud074\ub798\uc2a4\uc774\ub984\uc740 \ubcc0\uacbd\ud558\uc9c0 \uc54a\uace0 \uadf8\ub300\ub85c \uc0ac\uc6a9\ud55c\ub2e4. \uc2a4\uc640\uc774\ud37c\uc758 \ubd80\ubaa8\uc694\uc18c\uc778 section\uacfc div \ub294 \ud544\uc694\uc5d0 \ub530\ub77c \ubcc0\uacbd\ud574\uc11c \uc0ac\uc6a9\ud558\uba74\ub41c\ub2e4.\n  ```html\n  &lt;section class=&quot;notice&quot;&gt;\n    &lt;div class=&quot;promotion&quot;&gt;\n      &lt;div class=&quot;swiper-container&quot;&gt;\n        &lt;div class=&quot;swiper-wrapper&quot;&gt;\n          &lt;div class=&quot;swiper-slide&quot;&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;swiper-prev&quot;&gt;&lt;\/div&gt;\n      &lt;div class=&quot;swiper-next&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/section&gt;\n  ```\n+ \uc2ac\ub77c\uc774\ub4dc\uc5d0 \ucd94\uac00\ud560 \uc774\ubbf8\uc9c0\ub97cimg \ud0dc\uadf8\ub97c \uc774\uc6a9\ud574 swiper-slide \uc790\uc2dd \uc694\uc18c\ub85c \uc785\ub825\ud55c\ub2e4.\n  ```html\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/1.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/2.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/3.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/4.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/5.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/6.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/7.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;\n      &lt;img src=&quot;.\/imgs\/8.jpg&quot; alt=&quot;&quot; \/&gt;\n    &lt;\/div&gt;\n  ```\n+ \uad6c\uae00 \uba38\ud2f0\ub9ac\uc5bc \uc544\uc774\ucf58\uc744 \uc774\uc6a9\ud574 \uc88c\/\uc6b0 \ud654\uc0b4\ud45c\ub97c \uc785\ub825\ud55c\ub2e4.\n    ```html\n      &lt;div class=&quot;swiper-prev&quot;&gt;\n        &lt;span class=&quot;material-symbols-outlined&quot;&gt; chevron_left &lt;\/span&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;swiper-next&quot;&gt;\n        &lt;span class=&quot;material-symbols-outlined&quot;&gt; chevron_right &lt;\/span&gt;\n      &lt;\/div&gt;\n    ```\n<\/code><\/pre>\n<h4>CSS<\/h4>\n<pre><code>1. &quot;body&quot; \ubc30\uacbd\uc0c9\uc744 \ud30c\uc77c 1\uac1c\ub97c \uc9c0\uc815\ud558\uace0 \uae00\uaf34\uc744 \uc9c0\uc815\ud55c\ub2e4. \uc2a4\uc640\uc774\ud37c\ub97c \uac10\uc2f8\ub294&quot;promotion&quot;\uc5d0\ub3c4 \ubc30\uacbd\uc0c9\uacfc \ub192\uc774\ub97c \uc124\uc815\ud55c\ub2e4.\n  ```css\n    body {\n      background-color: rgb(228, 247, 255);\n      color: darkblue;\n      font-size: 16px;\n      font-weight: 400;\n      line-height: 1.4;\n      font-family: &#39;Nanum Gothic&#39;, sans-serif;\n    }\n    .notice .promotion {\n      height: 740px;\n      background-color: #3e85a3;\n      position: relative;\n      overflow-x: hidden;\n    }\n  ```\n<\/code><\/pre>\n<h4>JS<\/h4>\n<pre><code>```js\n  &#39;use strict&#39;;\n  new Swiper(&#39;.promotion .swiper-container&#39;, {\n    slidesPerView: 3, \/\/\ud55c\ubc88\uc5d0 \ubcf4\uc5ec\uc904 \uc2ac\ub77c\uc774\ub4dc \uac1c\uc218\n    spaceBetween: 20,\n    centeredSlides: true,\n    loop: true,\n    autoplay: {\n      delay: 5000,\n    },\n    pagination: {\n      el: &#39;.swiper-pagination&#39;,\n      clickable: true, \/\/\uc0ac\uc6a9\uc790\uc758 \ud398\uc774\uc9c0 \ubc88\ud638 \uc694\uc18c \uc81c\uc5b4 \uac00\ub2a5 \uc5ec\ubd80\n    },\n    navigation: {\n      prevEl: &#39;.promotion .swiper-prev&#39;,\n      nextEl: &#39;.promotion .swiper-next&#39;,\n    },\n  });\n```\n<\/code><\/pre>\n<h3>7.2. STEP2<\/h3>\n<blockquote>\n<p>\uc774\ubbf8\uc9c0 \uc704\uce58\uc870\uc815<\/p>\n<\/blockquote>\n<h4>CSS<\/h4>\n<ul>\n<li>\uc2ac\ub77c\uc774\ub4dc\ub97c 3\uc7a5\uc529 \ubcf4\uc5ec\uc8fc\uace0 \uc120\ud0dd\ub41c \uc774\ubbf8\uc9c0\ub294 \uc911\uc559\uc5d0 \uc120\uba85\ud558\uac8c \ubcf4\uc5ec \uc8fc\uace0 \uc591\ucabd\uc5d0 \uc774\ubbf8\uc9c0\ub294 \ud22c\uba85\ub3c4\ub97c 0.4\uc815\ub3c4\ub97c \uc918\uc11c \ubc18\ud22c\uba85\ud558\uac8c \ubcf4\uc5ec\uc8fc \ub3c4\ub85d \ud55c\ub2e4. \uc138\uc7a5\uc758 \uc774\ubbf8\uc9c0\ub97c \ubcf4\uc5ec\uc8fc\uae30 \uc704\ud574 &quot;swiper-container&quot;\uc758 \ud3ed\uc744 3\ubc30 \ub85c \uc9c0\uc815\ud558\uace0 \uac04\uaca9\uc744 20\ud53d\uc140 \ub354\ud55c 2,480\ud53d\uc140\ub85c \uc9c0\uc815\ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-css\">    .notice .promotion .swiper-container {\n    width: calc(420px * 3 + 20px);\n    height: 540px;\n    position: absolute;\n    top: 40px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n<\/code><\/pre>\n<h3>7.3. STEP3<\/h3>\n<blockquote>\n<p>\ud22c\uba85\ub3c4 \uc870\uc815 \ubc0f \ubc84\ud2bc \ubc30\uce58<\/p>\n<\/blockquote>\n<h4>CSS<\/h4>\n<ul>\n<li>\uc2ac\ub77c\uc774\ub4dc\uc5d0\uc11c \uac00\uc6b4\ub370 \ubcf4\uc5ec\uc9c0\ub294 \uc774\ubbf8\uc9c0\uc758 \ud22c\uba85\ub3c4\ub97c 1\ub85c \ud558\uace0 \uc591\ucabd\uc5d0 \uc774\ubbf8\uc9c0\ub294 \ud22c\uba85\ub3c4\ub97c 0.4\ub85c \uc9c0\uc815\ud55c\ub2e4. \ud398\uc774\uc9c0\ub124\uc774\uc158 \ube14\ub9bf\uc740 \uc774\ubbf8\uc9c0(&quot;.\/imgs\/promotion_slide_pager.png&quot;)\ub97c \ubc31\uadf8\ub77c\uc6b4\ub85c \uc9c0\uc815\ud55c\ub2e4. \uadf8\ud6c4 \uc561\ud2f0\ube0c \uc0c1\ud0dc\uc758 \uc774\ubbf8\uc9c0 (&quot;.\/imgs\/promotion_slide_pager_on.png&quot;)\ub97c \uad50\uccb4\ud558\ub3c4\ub85d \uc124\uc815\ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-css\">    .notice .promotion .swiper-slide {\n    opacity: 0.4;\n    transition: opacity 1s;\n    position: relative;\n    text-align: center;\n  }\n  .notice .promotion .swiper-slide img {\n    width: 100%;\n    height: 100%; \/* \ube44\uc728\uae68\uc9d0 *\/\n    object-fit: fill;\n    object-fit: contain;\n    object-fit: scale-down;\n    object-fit: cover; \/* \uac00\ub85c\uae30\uc900\uc73c\ub85c \ube44\uc728\uc5d0 \ub9de\uac8c \ucc44\uc6c0 *\/\n  }\n  .notice .promotion .swiper-slide-active {\n    opacity: 1;\n  }\n  .notice .promotion .swiper-pagination {\n    bottom: 40px;\n    left: 0;\n    right: 0;\n    position: absolute;\n    z-index: 9999;\n  }\n  .notice .promotion .swiper-pagination .swiper-pagination-bullet {\n    background-color: transparent;\n    background: url(&#39;.\/imgs\/promotion_slide_pager.png&#39;) no-repeat center center\/100%;\n    width: 20px;\n    height: 20px;\n    margin-right: 6px;\n    outline: none;\n  }\n  .notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child {\n    margin-right: 0;\n  }\n  .notice .promotion .swiper-pagination .swiper-pagination-bullet-active {\n    background: url(&#39;.\/imgs\/promotion_slide_pager_on.png&#39;) no-repeat center center\/100%;\n  }\n<\/code><\/pre>\n<ul>\n<li>\uc88c\uc6b0\ub85c \uc774\ub3d9\ud558\ub294 \ud654\uc0b4\ud45c\uc5d0 \ud638\ubc84\ub97c \uc124\uc815\ud55c\ub2e4.\n<pre><code class=\"language-css\">  .notice .promotion .swiper-prev,\n  .notice .promotion .swiper-next {\n    width: 42px;\n    height: 42px;\n    border: 2px solid rgb(255, 255, 255);\n    border-radius: 50%;\n    color: white;\n    position: absolute;\n    top: 300px;\n    z-index: 1;\n    cursor: pointer;\n    outline: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: 0.4s;\n    user-select: none;\n  }\n  .notice .promotion .swiper-prev {\n    left: 50%;\n    margin-left: -480px;\n  }\n  .notice .promotion .swiper-next {\n    right: 50%;\n    margin-right: -480px;\n  }\n  .notice .promotion .swiper-prev:hover,\n  .notice .promotion swiper-next:hover {\n    background-color: rgb(255, 255, 255);\n    color: rgb(0, 0, 0);\n  }\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<h2>8. \ub3d9\uc601\uc0c1 \uc2ac\ub77c\uc774\ub354<\/h2>\n<ul>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/3.html\">\ubbf8\ub9ac\ubcf4\uae30 \u25b6 <\/a><\/li>\n<\/ul>\n<h4>HTML<\/h4>\n<pre><code class=\"language-html\">  &lt;div class=&quot;swiper video-slider&quot;&gt;\n    &lt;div class=&quot;swiper-wrapper&quot;&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;\n        &lt;video controls loop muted autoplay&gt;\n          &lt;source src=&quot;imgs\/1.mp4&quot; type=&quot;video\/mp4&quot; \/&gt;\n        &lt;\/video&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;\n        &lt;video controls loop muted autoplay&gt;\n          &lt;source src=&quot;imgs\/2.mp4&quot; type=&quot;video\/mp4&quot; \/&gt;\n        &lt;\/video&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;swiper-slide&quot;&gt;\n        &lt;video controls loop muted autoplay&gt;\n          &lt;source src=&quot;imgs\/3.mp4&quot; type=&quot;video\/mp4&quot; \/&gt;\n        &lt;\/video&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n<\/code><\/pre>\n<h4>Css<\/h4>\n<pre><code class=\"language-css\">    .video-slider {\n    width: 100%;\n    height: 500px;\n  }\n  .video-slider iframe,\n  .video-slider video {\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n<\/code><\/pre>\n<h4>js<\/h4>\n<pre><code class=\"language-js\">   function stopAll() {\n      document.querySelectorAll(&quot;.video-slider video&quot;).forEach((v) =&gt; {\n        v.pause();\n        v.currentTime = 0;\n      });\n    }\n\n    function playCur(sw) {\n      const v = sw.slides[sw.activeIndex].querySelector(&quot;video&quot;);\n      if (v) v.play();\n    }\n\n    const vs = new Swiper(&quot;.video-slider&quot;, {\n      autoplay: { delay: 5000 },\n      loop: true,\n      navigation: {\n        nextEl: &quot;.swiper-button-next&quot;,\n        prevEl: &quot;.swiper-button-prev&quot;,\n      },\n      on: {\n        slideChange: function () {\n          stopAll();\n          playCur(this);\n        },\n        init: function () {\n          playCur(this);\n        },\n      },\n    });\n<\/code><\/pre>\n<ul>\n<li>stopAll() &#8211; \ubaa8\ub4e0 \ube44\ub514\uc624\ub97c \uc815\uc9c0\ud558\uace0 \ucc98\uc74c\uc73c\ub85c \ub418\ub3cc\ub9bc<\/li>\n<li>playCur(sw) &#8211; \ud604\uc7ac \ud65c\uc131\ud654\ub41c \uc2ac\ub77c\uc774\ub4dc\uc758 \ube44\ub514\uc624\ub9cc \uc7ac\uc0dd<\/li>\n<li>slideChange \uc774\ubca4\ud2b8 &#8211; \uc2ac\ub77c\uc774\ub4dc\uac00 \ubc14\ub014 \ub54c\ub9c8\ub2e4: \ubaa8\ub4e0 \ube44\ub514\uc624 \uc815\uc9c0, \uc0c8\ub85c\uc6b4 \uc2ac\ub77c\uc774\ub4dc\uc758 \ube44\ub514\uc624\ub9cc \uc7ac\uc0dd<\/li>\n<li>init \uc774\ubca4\ud2b8 &#8211; \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \uccab \ubc88\uc9f8 \uc2ac\ub77c\uc774\ub4dc \ube44\ub514\uc624 \uc790\ub3d9 \uc7ac\uc0dd<\/li>\n<li>autoplay &#8211; 5\ucd08\ub9c8\ub2e4 \uc790\ub3d9\uc73c\ub85c \ub2e4\uc74c \uc2ac\ub77c\uc774\ub4dc\ub85c \uc774\ub3d9<\/li>\n<\/ul>\n<h2>9. \uc218\uc9c1 \uc2ac\ub77c\uc774\ub354<\/h2>\n<ul>\n<li><a href=\"https:\/\/qwerewqwerew.github.io\/source\/ui\/swiper\/demo\/06-vertical-slider.html\">\ubbf8\ub9ac\ubcf4\uae30 \u25b6 <\/a><\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;div class=&quot;swiper vertical&quot;&gt;\n  &lt;div class=&quot;swiper-wrapper&quot;&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;1&lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;2&lt;\/div&gt;\n    &lt;div class=&quot;swiper-slide&quot;&gt;3&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n  .vertical { width: 100%; height: 100vh; }\n&lt;\/style&gt;\n\n&lt;script&gt;\n  const vertical = new Swiper(&#39;.vertical&#39;, {\n    direction: &#39;vertical&#39;,  \/\/ \uc218\uc9c1 \ubc29\ud5a5\n    slidesPerView: 1,\n    mousewheel: true,       \/\/ \ub9c8\uc6b0\uc2a4 \ud720\ub85c \uc774\ub3d9\n    pagination: {\n      el: &#39;.swiper-pagination&#39;,\n      clickable: true\n    }\n  });\n&lt;\/script&gt;\n<\/code><\/pre>\n<hr>\n<h2>10. \ud398\uc774\uc9c0\ub124\uc774\uc158 \uc885\ub958<\/h2>\n<h3>10.1. \uae30\ubcf8 (bullets)<\/h3>\n<pre><code class=\"language-js\">pagination: {\n  el: &#39;.swiper-pagination&#39;,\n  clickable: true\n}\n<\/code><\/pre>\n<h3>10.2. \uc22b\uc790\ud615<\/h3>\n<pre><code class=\"language-js\">pagination: {\n  el: &#39;.swiper-pagination&#39;,\n  clickable: true,\n  renderBullet: function(index, className) {\n    return &#39;&lt;span class=&quot;&#39; + className + &#39;&quot;&gt;&#39; + (index + 1) + &#39;&lt;\/span&gt;&#39;;\n  }\n}\n<\/code><\/pre>\n<h3>10.3. \ud504\ub85c\uadf8\ub798\uc2a4\ubc14<\/h3>\n<pre><code class=\"language-js\">pagination: {\n  el: &#39;.swiper-pagination&#39;,\n  type: &#39;progressbar&#39;\n}\n<\/code><\/pre>\n<h3>10.4. \ubd84\uc218\ud615<\/h3>\n<pre><code class=\"language-js\">pagination: {\n  el: &#39;.swiper-pagination&#39;,\n  type: &#39;fraction&#39;\n}\n<\/code><\/pre>\n<hr>\n<h2>11. \uc774\ubca4\ud2b8 \ud65c\uc6a9<\/h2>\n<pre><code class=\"language-js\">const swiper = new Swiper(&#39;.swiper&#39;, {\n  on: {\n    \/\/ \ucd08\uae30\ud654 \uc644\ub8cc\n    init: function() {\n      console.log(&#39;Swiper \ucd08\uae30\ud654 \uc644\ub8cc&#39;);\n    },\n    \/\/ \uc2ac\ub77c\uc774\ub4dc \ubcc0\uacbd\n    slideChange: function() {\n      console.log(&#39;\ud604\uc7ac \uc2ac\ub77c\uc774\ub4dc:&#39;, this.realIndex);\n    },\n    \/\/ \uc2ac\ub77c\uc774\ub4dc \ubcc0\uacbd \uc644\ub8cc\n    slideChangeTransitionEnd: function() {\n      console.log(&#39;\uc804\ud658 \uc644\ub8cc&#39;);\n    }\n  }\n});\n<\/code><\/pre>\n<hr>\n<h2>12. \ucc38\uace0 \ub9c1\ud06c<\/h2>\n<ul>\n<li><a href=\"https:\/\/swiperjs.com\/\">Swiper \uacf5\uc2dd \ubb38\uc11c<\/a><\/li>\n<li><a href=\"https:\/\/swiperjs.com\/swiper-api\">API \ubb38\uc11c<\/a><\/li>\n<li><a href=\"https:\/\/swiperjs.com\/demos\">\ub370\ubaa8<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>1. Swiper\ub780? Note: Swiper \uacf5\uc2dd \uc0ac\uc774\ud2b8 \ud30c\uc77c\ub2e4\uc6b4\ub85c\ub4dc Swiper\ub294 \ud130\uce58 \uc2ac\ub77c\uc774\ub354 \ub77c\uc774\ube0c\ub7ec\ub9ac. \ubaa8\ubc14\uc77c\uacfc \ub370\uc2a4\ud06c\ud1b1 \ubaa8\ub450 \uc9c0\uc6d0. \uc8fc\uc694 \ud2b9\uc9d5: \ud130\uce58\/\ub4dc\ub798\uadf8 \uc9c0\uc6d0 \ubc18\uc751\ud615 \ub514\uc790\uc778 \ub2e4\uc591\ud55c \ud6a8\uacfc (fade, cube, flip \ub4f1) \ub124\ube44\uac8c\uc774\uc158, \ud398\uc774\uc9c0\ub124\uc774\uc158 \uc9c0\uc6d0 2. \uc124\uce58 2.1. CDN &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css&quot; \/&gt; &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js&quot;&gt;&lt;\/script&gt; 2.2. NPM npm install swiper 3. \uae30\ubcf8 \uad6c\uc870 :::tip[\ud544\uc218 \uad6c\uc870] \uc2ac\ub77c\uc774\ub4dc\ub294 \ubc18\ub4dc\uc2dc \ub450 \ub2e8\uacc4\ub85c \uac10\uc2f8\uc57c &#8230; <a title=\"swiper\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=856\" aria-label=\"swiper\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-856","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=856"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/856\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}