tabs javascript function
This commit is contained in:
26
resources/assets/js/views/common/contacts.js
vendored
26
resources/assets/js/views/common/contacts.js
vendored
@ -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')),
|
||||
|
Reference in New Issue
Block a user