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

Question

所以我使用Swiper.js 在 Angular 应用程序上进行多层轮播。基本上有三个swiper-containers，它们的功能应该是相互补充的。这是他们Swiper thumbs gallery 的扩展，我在其中添加了一个额外的圆盘，并为图像添加了描述。

问题：

• 当我单击缩略图时，没有选择主图像。我需要它像图像描述一样工作。简单地说，当点击缩略图时，图像描述和图像预览都应该相应地改变。
• 奇怪的是分页计数是错误的。它显示的是 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',
        }
      });
    });
  }

最后，一个 GIF 可以让我的问题更容易理解。

Answer 1

想通了：

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