초기 PM 소스 전체 업로드

views/main/jsm/archive/manualSwiper.js

@@ -0,0 +1,72 @@
+let archiveManualSwiper = undefined;
+export async function renderManual() {
+    await createManualSwiperArea();
+
+    archiveManualSwiper = new Swiper('.modal-body > .manual-wrap .manual-swiper', {
+        slidesPerView: 1,
+        spaceBetween: 0,
+        centeredSlides: true,
+        speed: 400,
+        loop: true,
+        navigation: {
+            nextEl: '.swiper.manual-swiper .button-next',
+            prevEl: '.swiper.manual-swiper .button-prev',
+        },
+        pagination: {
+            el: '.swiper.manual-swiper .swiper-pagination',
+            clickable: true,
+            renderBullet: function (index, className) {
+                return '<span class="' + className + '">' + (index + 1) + "</span>";
+            },
+        },
+    });
+}
+
+/** swiper area
+ *  [div] manual-wrap
+ *      [div] manual-swiper (v) <-- swiper
+ *           [ul] manual-swiper-wrap <-- swiper-wrapper
+ *                [li] manual-swiper-item <-- swiper-slide
+ *                      [img] manual-img
+ *           [div] button-prev
+ *           [div] button-next
+ *           [div] swiper-pagination
+ */
+
+export async function createManualSwiperArea() {
+    const manualWrap = document.querySelector('.modal-body > .manual-wrap');
+    manualWrap.innerHTML = ''; // swiper 초기화
+
+    const manualSwiper = document.createElement('div');
+    manualSwiper.classList.add('swiper', 'manual-swiper');
+    const manualSwiperWrap = document.createElement('ul');
+    manualSwiperWrap.classList.add('swiper-wrapper', 'manual-swiper-wrap');
+    manualSwiper.appendChild(manualSwiperWrap);
+    manualWrap.appendChild(manualSwiper);
+
+    // swiper 동적 생성
+    for (let i = 0; i < 5; i++) {
+        const manualSwiperItem = document.createElement('li');
+        manualSwiperItem.classList.add('swiper-slide', 'manual-swiper-item');
+        manualSwiperItem.dataset.save = true;
+        manualSwiperItem.dataset.fileName = `${[i+1]}.jpg`;
+
+        const manualImg = document.createElement('img');
+        manualImg.classList.add('manual-img');
+        manualImg.src = `/main/img/manual/${[i+1]}.jpg`;
+
+        manualSwiperItem.appendChild(manualImg);
+        manualSwiperWrap.appendChild(manualSwiperItem);
+    }
+
+    // 이전버튼, 다음버튼, 페이지네이션버튼 생성
+    const swiperButtonPrev = document.createElement('div');
+    swiperButtonPrev.classList.add('button-prev');
+    const swiperButtonNext = document.createElement('div');
+    swiperButtonNext.classList.add('button-next');
+    const swiperPagination = document.createElement('div');
+    swiperPagination.classList.add('swiper-pagination');
+    manualSwiper.appendChild(swiperButtonPrev);
+    manualSwiper.appendChild(swiperButtonNext);
+    manualSwiper.appendChild(swiperPagination);
+}