javascript - Angular 应用程序中的 Swiper.js 拇指已同步上一个和下一个
问题描述
所以我将Swiper.js用于 Angular 应用程序上的多层轮播。本质上是三个swiper-containers
,他们的功能应该是相互补充的。这是他们的Swiper thumbs Gallery的扩展,我在其中添加了一个额外的 crosel,并为图像添加了描述。
问题:
- 当我单击缩略图时,没有选择主图像。我需要它像图像描述一样工作。简单地说,当点击缩略图时,图像描述和图像预览都应该相应地改变。
- 奇怪的是分页计数是错误的。它说 6,而不是正确的数字 8。
下面是组件html:
<section class="gallery-section">
<div class="gallery-left">
<div class="swiper-container gallery-text">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<div class="image-controls">
<div class="swiper-button-prev swiper-button-mobile"></div>
<div class="swiper-pagination swiper-pagination-mobile"></div>
<div class="swiper-button-next swiper-button-mobile"></div>
</div>
<div class="image-info">
<div class="image-description">{{ image.description }}</div>
<div class="image-date">{{ image.date }}</div>
</div>
</div>
</div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
<div class="swiper-button-next swiper-button-desktop"></div>
<div class="swiper-button-prev swiper-button-desktop"></div>
<div class="swiper-pagination swiper-pagination-desktop"></div>
</div>
<div class="gallery-right">
<div class="swiper-container gallery-main">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
</div>
</section>
这是 ts 文件的初始化:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
freeMode: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
watchSlidesVisibility: true,
watchSlidesProgress: true
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs,
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
});
}
解决方案
弄清楚了:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
thumbs: {
swiper: galleryThumbs
}
});
galleryText.controller.control = galleryMain;
galleryMain.controller.control = galleryText;
});
}