Skip to content

Commit c968932

Browse files
nolimits4webnolimits4web
authored
Merge pull request #4235 from vltansky/angular-thumbs
feat(angular): thumbs & controller support
2 parents 01d81d4 + 76acd28 commit c968932

File tree

3 files changed

+178
-81
lines changed

3 files changed

+178
-81
lines changed

‎playground/angular/src/app/app.component.html

+148-80
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,159 @@
11
<main>
2+
<div>
3+
<swiper
4+
#swiperVirtualRef
5+
[slidesPerView]="3"
6+
[spaceBetween]="50"
7+
[pagination]="{ type: 'fraction' }"
8+
virtual
9+
slideActiveClass="swiper-active whyWouldIuseCustomClass"
10+
[centeredSlides]="true"
11+
navigation
12+
>
13+
<ng-template swiperSlide *ngFor="let slide of virtualSlides; index as i"
14+
>Slide {{ slide }}</ng-template
15+
>
16+
<ng-template swiperSlide>Slide</ng-template>
17+
<ng-template swiperSlide>Slide</ng-template>
18+
</swiper>
19+
<swiper [zoom]="true" [autoplay]="true">
20+
<ng-template swiperSlide class="custom-class" [zoom]="true">
21+
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
22+
</ng-template>
23+
<ng-template swiperSlide>
24+
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
25+
</ng-template>
26+
<ng-template swiperSlide [zoom]="true">
27+
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
28+
</ng-template>
29+
</swiper>
30+
<swiper
31+
#swiperRef
32+
[navigation]="navigation"
33+
(swiper)="log('swiper')"
34+
(slideChange)="log('slideChange')"
35+
[slidesPerView]="3"
36+
[spaceBetween]="50"
37+
[breakpoints]="breakpoints"
38+
[scrollbar]="scrollbar"
39+
[loop]="true"
40+
[(index)]="indexNumber"
41+
[pagination]="{ el: '.swiper-pagination.pagination-test' }"
42+
>
43+
<ng-container *ngIf="show">
44+
<ng-template swiperSlide>Best slide ever 1 {{ show }}</ng-template>
45+
<ng-template swiperSlide>Best slide ever 2</ng-template>
46+
</ng-container>
47+
<ng-template swiperSlide>
48+
<div *ngIf="true">Best slide ever 3</div>
49+
</ng-template>
50+
<ng-template swiperSlide let-data *ngFor="let slide of slides; index as i">
51+
{{ slide }} / active: {{ data.isActive }} / next: {{ data.isNext }}</ng-template
52+
>
53+
<div slot="container-end" class="swiper-pagination pagination-test"></div>
54+
</swiper>
55+
<button (click)="slides.push('test')">Add slide</button>
56+
<button (click)="toggleNavigation()">Toggle navigation</button>
57+
<button (click)="toggleScrollbar()">Toggle scrollbar</button>
58+
<button (click)="breakpointChange()">Breakpoint change</button>
59+
<button (click)="show = !show">Toggle show</button>
60+
<button (click)="indexNumber = 0">0</button>
61+
<button (click)="indexNumber = 3">3</button>
62+
<button (click)="indexNumber = 5">5</button>
63+
<button (click)="indexNumber = 6">6</button>
64+
{{ indexNumber }}
65+
66+
<swiper [config]="exampleConfig">
67+
<ng-template swiperSlide>Best slide ever 2</ng-template>
68+
<ng-template swiperSlide>Best slide ever 2</ng-template>
69+
<ng-template swiperSlide>Best slide ever 2</ng-template>
70+
<ng-template swiperSlide>Best slide ever 2</ng-template>
71+
<ng-template swiperSlide>Best slide ever 2</ng-template>
72+
</swiper>
73+
<button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>
74+
75+
{{ exampleConfig | json }}
76+
<swiper
77+
#swiper
78+
[slidesPerView]="1"
79+
[centeredSlides]="true"
80+
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
81+
[pagination]="pagination"
82+
>
83+
<ng-template swiperSlide *ngFor="let slide of slides2; index as i">
84+
{{ i }} - {{ slide }}
85+
</ng-template>
86+
</swiper>
87+
<button type="button" class="swiper-navigation-prev">&lt;</button>
88+
<button type="button" class="swiper-navigation-next">&gt;</button>
89+
<hr />
90+
<button (click)="replaceSlides()">replace slides</button>
91+
<button (click)="togglePagination()">Toggle pagination</button>
92+
</div>
93+
<div>
294
<swiper
3-
#swiperVirtualRef
4-
[slidesPerView]="3"
95+
[slidesPerView]="1"
596
[spaceBetween]="50"
6-
[pagination]="{ type: 'fraction' }"
7-
virtual
8-
slideActiveClass="swiper-active whyWouldIuseCustomClass"
9-
[centeredSlides]="true"
10-
navigation
97+
[navigation]="true"
98+
[pagination]="{ clickable: true }"
99+
[thumbs]="{ swiper: thumbsSwiper }"
11100
>
12-
<ng-template swiperSlide *ngFor="let slide of virtualSlides; index as i"
13-
>Slide {{ slide }}</ng-template
14-
>
15-
<ng-template swiperSlide>Slide</ng-template>
16-
<ng-template swiperSlide>Slide</ng-template>
17-
</swiper>
18-
<swiper [zoom]="true" [autoplay]="true">
19-
<ng-template swiperSlide class="custom-class" [zoom]="true">
20-
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
21-
</ng-template>
22-
<ng-template swiperSlide>
23-
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
24-
</ng-template>
25-
<ng-template swiperSlide [zoom]="true">
26-
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
27-
</ng-template>
101+
<ng-template swiperSlide>Slide 1</ng-template>
102+
<ng-template swiperSlide>Slide 2</ng-template>
103+
<ng-template swiperSlide>Slide 3</ng-template>
104+
<ng-template swiperSlide>Slide 4</ng-template>
105+
<ng-template swiperSlide>Slide 5</ng-template>
106+
<ng-template swiperSlide>Slide 6</ng-template>
28107
</swiper>
29108
<swiper
30-
#swiperRef
31-
[navigation]="navigation"
32-
(swiper)="log('swiper')"
33-
(slideChange)="log('slideChange')"
34109
[slidesPerView]="3"
35110
[spaceBetween]="50"
36-
[breakpoints]="breakpoints"
37-
[scrollbar]="scrollbar"
38-
[loop]="true"
39-
[(index)]="indexNumber"
40-
[pagination]="{ el: '.swiper-pagination.pagination-test' }"
41-
>
42-
<ng-container *ngIf="show">
43-
<ng-template swiperSlide>Best slide ever 1 {{ show }}</ng-template>
44-
<ng-template swiperSlide>Best slide ever 2</ng-template>
45-
</ng-container>
46-
<ng-template swiperSlide>
47-
<div *ngIf="true">Best slide ever 3</div>
48-
</ng-template>
49-
<ng-template swiperSlide let-data *ngFor="let slide of slides; index as i">
50-
{{ slide }} / active: {{ data.isActive }} / next: {{ data.isNext }}</ng-template
51-
>
52-
<div slot="container-end" class="swiper-pagination pagination-test"></div>
53-
</swiper>
54-
<button (click)="slides.push('test')">Add slide</button>
55-
<button (click)="toggleNavigation()">Toggle navigation</button>
56-
<button (click)="toggleScrollbar()">Toggle scrollbar</button>
57-
<button (click)="breakpointChange()">Breakpoint change</button>
58-
<button (click)="show = !show">Toggle show</button>
59-
<button (click)="indexNumber = 0">0</button>
60-
<button (click)="indexNumber = 3">3</button>
61-
<button (click)="indexNumber = 5">5</button>
62-
<button (click)="indexNumber = 6">6</button>
63-
{{ indexNumber }}
64-
65-
<swiper [config]="exampleConfig">
66-
<ng-template swiperSlide>Best slide ever 2</ng-template>
67-
<ng-template swiperSlide>Best slide ever 2</ng-template>
68-
<ng-template swiperSlide>Best slide ever 2</ng-template>
69-
<ng-template swiperSlide>Best slide ever 2</ng-template>
70-
<ng-template swiperSlide>Best slide ever 2</ng-template>
71-
</swiper>
72-
<button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>
73-
74-
{{ exampleConfig | json }}
75-
<swiper
76-
#swiper
77-
[slidesPerView]="1"
78-
[centeredSlides]="true"
79-
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
80-
[pagination]="pagination"
111+
(swiper)="setThumbsSwiper($event)"
112+
[navigation]="{}"
113+
[pagination]="{ clickable: true }"
114+
[scrollbar]="{ draggable: true }"
115+
[watchSlidesVisibility]="true"
116+
[watchSlidesProgress]="true"
81117
>
82-
<ng-template swiperSlide *ngFor="let slide of slides2; index as i">
83-
{{ i }} - {{ slide }}
84-
</ng-template>
118+
<ng-template swiperSlide>Slide 1</ng-template>
119+
<ng-template swiperSlide>Slide 2</ng-template>
120+
<ng-template swiperSlide>Slide 3</ng-template>
121+
<ng-template swiperSlide>Slide 4</ng-template>
122+
<ng-template swiperSlide>Slide 5</ng-template>
123+
<ng-template swiperSlide>Slide 6</ng-template>
85124
</swiper>
86-
<button type="button" class="swiper-navigation-prev">&lt;</button>
87-
<button type="button" class="swiper-navigation-next">&gt;</button>
88-
<hr />
89-
<button (click)="replaceSlides()">replace slides</button>
90-
<button (click)="togglePagination()">Toggle pagination</button>
125+
</div>
126+
<div>
127+
<swiper
128+
[slidesPerView]="1"
129+
[spaceBetween]="50"
130+
[navigation]="true"
131+
[pagination]="{ clickable: true }"
132+
[controller]="{ control: controlledSwiper }"
133+
>
134+
<ng-template swiperSlide>Slide 1</ng-template>
135+
<ng-template swiperSlide>Slide 2</ng-template>
136+
<ng-template swiperSlide>Slide 3</ng-template>
137+
<ng-template swiperSlide>Slide 4</ng-template>
138+
<ng-template swiperSlide>Slide 5</ng-template>
139+
<ng-template swiperSlide>Slide 6</ng-template>
140+
</swiper>
141+
<swiper
142+
[slidesPerView]="3"
143+
[spaceBetween]="50"
144+
(swiper)="setControlledSwiper($event)"
145+
[navigation]="{}"
146+
[pagination]="{ clickable: true }"
147+
[scrollbar]="{ draggable: true }"
148+
[watchSlidesVisibility]="true"
149+
[watchSlidesProgress]="true"
150+
>
151+
<ng-template swiperSlide>Slide 1</ng-template>
152+
<ng-template swiperSlide>Slide 2</ng-template>
153+
<ng-template swiperSlide>Slide 3</ng-template>
154+
<ng-template swiperSlide>Slide 4</ng-template>
155+
<ng-template swiperSlide>Slide 5</ng-template>
156+
<ng-template swiperSlide>Slide 6</ng-template>
157+
</swiper>
158+
</div>
91159
</main>

‎playground/angular/src/app/app.component.ts

+23-1
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,21 @@ import SwiperCore, {
88
Virtual,
99
Zoom,
1010
Autoplay,
11+
Thumbs,
12+
Controller,
1113
} from '../../../../build/core';
1214

13-
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom, Autoplay]);
15+
SwiperCore.use([
16+
Navigation,
17+
Pagination,
18+
Scrollbar,
19+
A11y,
20+
Virtual,
21+
Zoom,
22+
Autoplay,
23+
Thumbs,
24+
Controller,
25+
]);
1426

1527
@Component({
1628
selector: 'app-root',
@@ -21,9 +33,19 @@ export class AppComponent {
2133
@ViewChild('swiperRef', { static: false }) swiperRef?: SwiperComponent;
2234

2335
show: boolean;
36+
thumbs: any;
2437
constructor(private cd: ChangeDetectorRef) {}
2538
ngOnInit() {}
2639

40+
thumbsSwiper: any;
41+
setThumbsSwiper(swiper) {
42+
this.thumbsSwiper = swiper;
43+
}
44+
controlledSwiper: any;
45+
setControlledSwiper(swiper) {
46+
this.controlledSwiper = swiper;
47+
}
48+
2749
indexNumber = 1;
2850
exampleConfig = { slidesPerView: 3 };
2951
slidesPerView: number = 4;

‎src/angular/src/swiper.component.ts

+7
Original file line numberDiff line numberDiff line change
@@ -446,6 +446,9 @@ export class SwiperComponent implements OnInit {
446446
this.childrenSlidesInit();
447447
this.initSwiper();
448448
this._changeDetectorRef.detectChanges();
449+
setTimeout(() => {
450+
this.s_swiper.emit(this.swiperRef);
451+
});
449452
}
450453

451454
private childrenSlidesInit() {
@@ -697,6 +700,10 @@ export class SwiperComponent implements OnInit {
697700
this.swiperRef.currentBreakpoint = null;
698701
this.swiperRef.setBreakpoint();
699702
}
703+
704+
if (changedParams.thumbs || changedParams.controller) {
705+
this.updateInitSwiper(changedParams);
706+
}
700707
this.swiperRef.update();
701708
});
702709
}

0 commit comments

Comments
 (0)