Ionic 6 angular capacitor project
Thumbnail not working even after following all steps given .
gallery.page.ts
import { Component, OnInit, ViewChild, ViewEncapsulation } from ‘@angular/core’;
import SwiperCore, {Thumbs,Pagination, Navigation, Keyboard,
Swiper, SwiperOptions} from ‘swiper’
import { SwiperComponent } from ‘swiper/angular’;
SwiperCore.use([Thumbs,Pagination,Navigation,Keyboard])
@Component({
selector: ‘app-gallery’,
templateUrl: ‘./gallery.page.html’,
styleUrls: [‘./gallery.page.scss’],
encapsulation:ViewEncapsulation.None
})
export class GalleryPage implements OnInit {
@ViewChild(‘mainswiper’, { static: false }) mainswiper :SwiperComponent
@ViewChild(‘thumbswiper’, { static: false }) thumbswiper:SwiperComponent
images=[‘…/…/assets/images/photo-1.jpg’,
‘…/…/assets/images/photo-2.jpg’,
‘…/…/assets/images/photo-3.jpg’,
‘…/…/assets/images/photo-4.jpg’,
‘…/…/assets/images/photo-5.jpg’,
‘…/…/assets/images/photo-6.jpg’
]
configMain:SwiperOptions;
configGalleryThumbs:any;
constructor() { }
ngOnInit() { }
ngAfterViewInit() {
this.configGalleryThumbs= {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
controller:{control : this.mainswiper.swiperRef},
slideToClickedSlide:true,
centeredSlides:true,
}
this.thumbswiper.config=this.configGalleryThumbs;
this.configMain={
pagination:true,
navigation:true,
freeMode:true,
controller: {control: this.thumbswiper.swiperRef},
thumbs:{swiper:this.thumbswiper.swiperRef}
};
this.mainswiper.config=this.configMain;
this.mainswiper.updateSwiper({})
}
}
gallery.page.html
<swiper #mainswiper [loop]="true" [keyboard]="true">
<ng-template swiperSlide *ngFor="let img of images">
<img src="{{img}}" style="width:50%"/>
</ng-template>
</swiper>
<swiper #thumbswiper [loopedSlides]="6"
class="gallery-thumbs swiper-free-mode swiper-thumbs">
<ng-template swiperSlide *ngFor="let img of images" role="group"
class="swiper-slide swiper-slide-active swiper-slide-visible" transition-duration: 0ms;>
<img src="{{img}}" style="width: 90%;" />
</ng-template>
</swiper>