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

Question

所以我将Swiper.js用于角度应用程序上的多层轮播。从本质上讲，三个人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;
    });
  }