tabs javascript function

This commit is contained in:
Burak Civan
2022-11-02 16:33:59 +03:00
parent 9a495ce457
commit a2568f91d2
6 changed files with 51 additions and 38 deletions

View File

@ -42,6 +42,32 @@ const app = new Vue({
for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
item.id = index;
if (document.querySelector('[data-tabs-swiper-wrapper]').childElementCount > 2) {
document.querySelectorAll('[data-tabs-slide]').forEach((item) => {
item.classList.add('swiper-slide');
});
document.querySelector('[data-tabs-swiper]').classList.add('swiper', 'swiper-links');
document.querySelector('[data-tabs-swiper-wrapper]').classList.add('swiper-wrapper');
let html = `
<div class="swiper-tabs-container">
${document.querySelector('[data-tabs-swiper]').innerHTML}
</div>
<div class="swiper-button-next top-3 right-0">
<span class="material-icons">chevron_right</span>
</div>
<div class="swiper-button-prev top-3 left-0">
<span class="material-icons">chevron_left</span>
</div>
`;
document.querySelector('[data-tabs-swiper]').innerHTML = html;
}
// console.log(swiper.activeIndex);
new Swiper(".swiper-tabs-container", {
loop: false,
slidesPerView: Number(item.getAttribute('data-swiper')),