zz-shopify-components
Version:
Reusable Shopify components for theme projects
86 lines (78 loc) • 2.5 kB
JavaScript
document.addEventListener('DOMContentLoaded', (event) => {
if (!customElements.get('photo-swiper')) {
customElements.define(
'photo-swiper',
class PhotoSwiper extends HTMLElement {
swiper = null; // swiper实例
constructor() {
super();
// 初始化swiper
// if (!this.swiper) {
// this.initSwiper();
// }
}
// connectedCallback() {
// this.initSwiper();
// }
disconnectedCallback() {
if (this.swiper) {
this.swiper.destroy();
this.swiper = null;
}
}
initSwiper() {
const swiperContainer = this.querySelector('.swiper');
if (!swiperContainer) return;
const slides = swiperContainer.querySelectorAll('.swiper-slide');
const imageCount = slides.length;
this.swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
spaceBetween: 0,
pagination: {
el: this.querySelector('.swiper-pagination'),
type: 'bullets',
clickable: true,
dynamicBullets: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'slide',
fadeEffect: {
crossFade: true,
},
loop: imageCount > 1,
observer: true,
observeParents: true,
speed: 500,
on: {
init: function () {
const paginationEl = this.pagination.el;
const prevButton = swiperContainer.querySelector(
'.swiper-button-prev'
);
const nextButton = swiperContainer.querySelector(
'.swiper-button-next'
);
if (imageCount <= 1) {
if (paginationEl) paginationEl.style.display = 'none';
if (prevButton) prevButton.style.display = 'none';
if (nextButton) nextButton.style.display = 'none';
}
},
},
});
}
// 销毁
destroySwiper() {
if (this.swiper) {
// 完全销毁swiper，包括所有事件监听器和DOM元素
this.swiper.destroy(true, true);
this.swiper = null;
}
}
}
);
}
});