Question

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

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

有人设法做到这一点吗？我看不到任何有关如何使用此包装器构建所有滑动器滑块的有效文档。另外，在演示中用于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）

Answer 2

这里是一个演示和示例。

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软件包并安装。

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

2 个答案: