CODEWITHSUNDEEP
angularswiper.js
Pierre Messo
Pierre Messo

Reputation: 73

Implementing image slider with thumbs using ngx-swiper-wrapper

I'm trying to implement ngx-swiper-wrapper to build an image slider with thumbs similar to this:

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

Has anyone managed to do this? I can't see any good documentation on how to build all swiper sliders with this wrapper. Also, is the FlexLayoutModule that is used in the demo for ngx-swiper-wrapper a must or can it be implemented without?

Upvotes: 3

Views: 4590

Answers (2)

Eugene Porodko
Eugene Porodko

Reputation: 314

We have working demo in native JS.

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

For Angular you only should add thumbs to SwiperConfigInterface like this:

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'})
    }
  };

and apply config

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

For .gallery-thumbs you should apply config by the same way.

(from docs https://swiperjs.com/api/#thumbs)

Upvotes: 2

Karnan Muthukumar
Karnan Muthukumar

Reputation: 1863

Here is an demo and example for you.

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>

I have just added sample docs please visit that npm package and install.

Upvotes: 1

Related Questions