Angular 应用程序中的 Swiper.js 拇指已同步上一个和下一个

Question

So I am using Swiper.js for a multi-layered carousel on angular app. Essentially there was three swiper-containers , who's functionalities are supposed to complement each other. It is an extention of their Swiper thumbs gallery , where I added an extra crousel with description to the images.

Issues:

• When I click on a thumnail, the main image is no selected along with it. I need it to work like the image description. Simply put, when one clicks on a thumnails, the image description and the image preview should both change correspondingly.
• Oddly the Pagition count is wrong. It says 6, instead of the correct number 8.

Below is the component 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>

Here is initialisation from the ts file:

 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', } }); }); }

Finally, a GIF which will hopefully make my issue easier to understand.

Answer 1

Figured it out:

 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; }); }