使用ngx-swiper-wrapper用拇指安装图像滑块

Question

我正在尝试实现ngx-swiper-wrapper，以使用类似于此的拇指来构建图像滑块：

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

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

Answer 1

这里是一个演示和示例。

https://lukasz-galka.github.io/ngx-gallery-demo/

https://www.npmjs.com/package/ngx-gallery

npm install ngx-gallery --save

// app.module.ts
import { NgxGalleryModule } from 'ngx-gallery';
...
@NgModule({
    imports: [
        ...
        NgxGalleryModule
        ...
    ],
    ...
})
export class AppModule { }

<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

我刚刚添加了示例文档，请访问该npm软件包并安装。

Answer 2

我们在本机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

，您应该以相同的方式应用配置。