").addClass(`book-icon-${index + 1}`);
const imgElement = $("![]()
").attr(
"src",
`${baseImgSrc}/imgs/index/new-main/book-icon.png`
);
bookIconElement.append(imgElement);
tabElement.prepend(bookIconElement);
const descHtml = createDescHtml(tabs[i]);
$(`.desc-wrapper-${index + 1}`).html(descHtml);
});
$(parentElementSelector).append(tabElement);
}
};
const createSlideElement = (index, parentElementSelector) => {
slides[index].forEach((slide) => {
const swiperSlide = $("
").addClass("swiper-slide");
if (slide.image) {
const imageElement = $("![]()
")
.attr("src", slide.image)
.attr("alt", "slide-img")
.addClass("slide-img");
swiperSlide.append(imageElement);
}
$(parentElementSelector).append(swiperSlide);
});
};
(() => {
for (let i = 1; i <= 3; i++) {
createTabElement(i - 1, `.tab-wrapper-${i}`);
createSlideElement(i - 1, `.swiper-wrapper-${i}`);
}
})();
const mainTabletSlide1 = new Swiper(".main-swiper-1", {
speed: 1000,
centeredSlides: true,
loop: true,
slidesPerView: 1,
touchMoveStopPropagation: true,
initialSlide: 0,
});
const mainTabletSlide2 = new Swiper(".main-swiper-2", {
speed: 1000,
centeredSlides: true,
loop: true,
slidesPerView: 1,
touchMoveStopPropagation: true,
initialSlide: 0,
});
const mainTabletSlide3 = new Swiper(".main-swiper-3", {
speed: 1000,
centeredSlides: true,
loop: true,
slidesPerView: 1,
touchMoveStopPropagation: true,
initialSlide: 0,
});
mainTabletSlide1.on("slideChange", function () {
updateActiveTab(0, this.realIndex);
});
mainTabletSlide2.on("slideChange", function () {
updateActiveTab(1, this.realIndex);
});
mainTabletSlide3.on("slideChange", function () {
updateActiveTab(2, this.realIndex);
});
// 스크롤 닿으면 autoplay
let options = {
root: null,
rootMargin: "0px",
threshold: 0,
};
let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
mainTabletSlide1.autoplay.start();
mainTabletSlide2.autoplay.start();
mainTabletSlide3.autoplay.start();
}
});
}, options);
let target = document.querySelector(".content-1");
observer.observe(target);
function updateActiveTab(swiperIndex, slideIndex) {
const parentElementSelector = `.tab-wrapper-${swiperIndex + 1}`;
const bookIconElement = $("
").addClass(`book-icon-${swiperIndex + 1}`);
const imgElement = $("![]()
").attr(
"src",
`${baseImgSrc}/imgs/index/new-main/book-icon.png`
);
bookIconElement.append(imgElement);
$(`${parentElementSelector} .tab`).removeClass(
`select-tab-${swiperIndex + 1}`
);
$(`${parentElementSelector} .tab .book-icon-${swiperIndex + 1}`).remove();
$(`${parentElementSelector} .tab:eq(${slideIndex})`)
.addClass(`select-tab-${swiperIndex + 1}`)
.prepend(bookIconElement);
const tabs = tabList[swiperIndex];
const descHtml = createDescHtml(tabs[slideIndex]);
$(`.desc-wrapper-${swiperIndex + 1}`).html(descHtml);
}
function changeSlide(swiperIndex, slideIndex) {
if (swiperIndex === 0) {
mainTabletSlide1.slideTo(slideIndex);
} else if (swiperIndex === 1) {
mainTabletSlide2.slideTo(slideIndex);
} else {
mainTabletSlide3.slideTo(slideIndex);
}
}
(() => {
for (let i = 1; i <= 3; i++) {
$(`${`.tab-wrapper-${i}`} .tab`)
.first()
.click();
}
})();
function createDescHtml(tab) {
return `
STEP 0${tab.id}
${tab.text}
${tab.description}
`;
}
// main slide 2 (books)
const bookCategories = ["NE능률", "지학사", "다락원", "영문법", "도서관"];
$(document).ready(function () {
$(".book-tab").on("click", function () {
$(".book-tab").removeClass("select-tab");
$(this).addClass("select-tab");
const index = $(this).index();
$(".main-7-img").removeClass("active");
$(".main-7-img").eq(index).addClass("active");
});
});
// main slide 3 (AI)
var mainAiSwiper = new Swiper(".main-10-swiper", {
speed: 1000,
centeredSlides: true,
loop: true,
slidesPerView: 1,
touchMoveStopPropagation: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
mainAiSwiper.on("slideChange", function () {
let currentIndex = mainAiSwiper.realIndex;
$(".main-10-text-img").removeClass("active");
$(".main-10-text-img").eq(currentIndex).addClass("active");
});