angular - 使用 ngx-swiper-wrapper 实现带有拇指的图像 slider

Question

我正在尝试实现 ngx-swiper-wrapper 来构建一个带有类似于此的拇指的图像 slider :

https://idangero.us/swiper/demos/300-thumbs-gallery.html

有没有人设法做到这一点？我看不到任何关于如何使用此包装器构建所有滑动器 slider 的好文档。另外，在 ngx-swiper-wrapper 的演示中使用的 FlexLayoutModule 是必须的还是可以不实现？

Answer 1

我们有原生 JS 的工作演示。

https://stackblitz.com/edit/swiper-demo-31-thumbs-gallery-with-loop-mode?file=index.html

---

对于 Angular，您只需要像这样向 SwiperConfigInterface 添加拇指:

galleryTopConfig: SwiperConfigInterface = {
    spaceBetween: 10,
    loop: true,
    loopedSlides: 5, //looped slides should be the same
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    thumbs: {
      swiper: Object.assign(this.galleryThumbsConfig, {el: '.gallery-thumbs'})
    }
  };

并应用配置

<div class="swiper-container gallery-top" [swiper]="galleryTopConfig">

对于.gallery-thumbs，您应该以相同的方式应用配置。

(来自文档 https://swiperjs.com/api/#thumbs)