72 lines
2.7 KiB
JavaScript
72 lines
2.7 KiB
JavaScript
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);
|
|
} |