使用 ngx-swiper-wrapper 实现带有拇指的图像滑块

Question

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

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

有没有人设法做到这一点？我看不到任何关于如何使用此包装器构建所有滑动器滑块的好文档。另外，ngx-swiper-wrapper demo中使用的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 你应该以同样的方式应用配置。

（来自文档 https://swiperjs.com/api/#thumbs）

使用 ngx-swiper-wrapper 实现带有拇指的图像滑块

Implementing image slider with thumbs using ngx-swiper-wrapper

swiper

angular