Skip to content

Commit f96db02

Browse files
vltanskyvltansky
committed
feat: custom html element support
1 parent 3aad554 commit f96db02

File tree

2 files changed

+82
-71
lines changed

2 files changed

+82
-71
lines changed

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

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -73,87 +73,89 @@
7373
<button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>
7474

7575
{{ exampleConfig | json }}
76+
</div>
77+
<div>
7678
<swiper
7779
#swiper
7880
[slidesPerView]="1"
7981
[centeredSlides]="true"
80-
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
82+
[navigation]="{ prevEl: prevEl, nextEl: nextEl }"
8183
[pagination]="pagination"
8284
>
8385
<ng-template swiperSlide *ngFor="let slide of slides2; index as i">
8486
{{ i }} - {{ slide }}
8587
</ng-template>
8688
</swiper>
87-
<button type="button" class="swiper-navigation-prev">&lt;</button>
88-
<button type="button" class="swiper-navigation-next">&gt;</button>
89+
<button type="button" #nextEl class="swiper-navigation-prev">&lt;</button>
90+
<button type="button" #prevEl class="swiper-navigation-next">&gt;</button>
8991
<hr />
9092
<button (click)="replaceSlides()">replace slides</button>
9193
<button (click)="togglePagination()">Toggle pagination</button>
9294
</div>
9395
<div>
94-
<swiper
95-
[slidesPerView]="1"
96-
[spaceBetween]="50"
97-
[navigation]="true"
98-
[pagination]="{ clickable: true }"
99-
[thumbs]="{ swiper: thumbsSwiper }"
100-
>
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>
107-
</swiper>
108-
<swiper
109-
[slidesPerView]="3"
110-
[spaceBetween]="50"
111-
(swiper)="setThumbsSwiper($event)"
112-
[navigation]="{}"
113-
[pagination]="{ clickable: true }"
114-
[scrollbar]="{ draggable: true }"
115-
[watchSlidesVisibility]="true"
116-
[watchSlidesProgress]="true"
117-
>
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>
124-
</swiper>
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>
96+
<swiper
97+
[slidesPerView]="1"
98+
[spaceBetween]="50"
99+
[navigation]="true"
100+
[pagination]="{ clickable: true }"
101+
[thumbs]="{ swiper: thumbsSwiper }"
102+
>
103+
<ng-template swiperSlide>Slide 1</ng-template>
104+
<ng-template swiperSlide>Slide 2</ng-template>
105+
<ng-template swiperSlide>Slide 3</ng-template>
106+
<ng-template swiperSlide>Slide 4</ng-template>
107+
<ng-template swiperSlide>Slide 5</ng-template>
108+
<ng-template swiperSlide>Slide 6</ng-template>
109+
</swiper>
110+
<swiper
111+
[slidesPerView]="3"
112+
[spaceBetween]="50"
113+
(swiper)="setThumbsSwiper($event)"
114+
[navigation]="{}"
115+
[pagination]="{ clickable: true }"
116+
[scrollbar]="{ draggable: true }"
117+
[watchSlidesVisibility]="true"
118+
[watchSlidesProgress]="true"
119+
>
120+
<ng-template swiperSlide>Slide 1</ng-template>
121+
<ng-template swiperSlide>Slide 2</ng-template>
122+
<ng-template swiperSlide>Slide 3</ng-template>
123+
<ng-template swiperSlide>Slide 4</ng-template>
124+
<ng-template swiperSlide>Slide 5</ng-template>
125+
<ng-template swiperSlide>Slide 6</ng-template>
126+
</swiper>
127+
</div>
128+
<div>
129+
<swiper
130+
[slidesPerView]="1"
131+
[spaceBetween]="50"
132+
[navigation]="true"
133+
[pagination]="{ clickable: true }"
134+
[controller]="{ control: controlledSwiper }"
135+
>
136+
<ng-template swiperSlide>Slide 1</ng-template>
137+
<ng-template swiperSlide>Slide 2</ng-template>
138+
<ng-template swiperSlide>Slide 3</ng-template>
139+
<ng-template swiperSlide>Slide 4</ng-template>
140+
<ng-template swiperSlide>Slide 5</ng-template>
141+
<ng-template swiperSlide>Slide 6</ng-template>
142+
</swiper>
143+
<swiper
144+
[slidesPerView]="3"
145+
[spaceBetween]="50"
146+
(swiper)="setControlledSwiper($event)"
147+
[navigation]="{}"
148+
[pagination]="{ clickable: true }"
149+
[scrollbar]="{ draggable: true }"
150+
[watchSlidesVisibility]="true"
151+
[watchSlidesProgress]="true"
152+
>
153+
<ng-template swiperSlide>Slide 1</ng-template>
154+
<ng-template swiperSlide>Slide 2</ng-template>
155+
<ng-template swiperSlide>Slide 3</ng-template>
156+
<ng-template swiperSlide>Slide 4</ng-template>
157+
<ng-template swiperSlide>Slide 5</ng-template>
158+
<ng-template swiperSlide>Slide 6</ng-template>
159+
</swiper>
160+
</div>
159161
</main>

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,10 @@ export class SwiperComponent implements OnInit {
164164
});
165165
if (
166166
typeof this._navigation !== 'boolean' &&
167-
(typeof this._navigation?.nextEl === 'string' || typeof this._navigation?.prevEl === 'string')
167+
(typeof this._navigation?.nextEl === 'string' ||
168+
typeof this._navigation?.prevEl === 'string' ||
169+
typeof this._navigation?.nextEl === 'object' ||
170+
typeof this._navigation?.prevEl === 'object')
168171
) {
169172
this.showNavigation = false;
170173
}
@@ -181,7 +184,10 @@ export class SwiperComponent implements OnInit {
181184
this._pagination = setProperty(val, {
182185
el: current || null,
183186
});
184-
if (typeof this._pagination !== 'boolean' && typeof this._pagination?.el === 'string') {
187+
if (
188+
typeof this._pagination !== 'boolean' &&
189+
(typeof this._pagination?.el === 'string' || typeof this._pagination?.el === 'object')
190+
) {
185191
this.showPagination = false;
186192
}
187193
}
@@ -197,7 +203,10 @@ export class SwiperComponent implements OnInit {
197203
this._scrollbar = setProperty(val, {
198204
el: current || null,
199205
});
200-
if (typeof this._scrollbar !== 'boolean' && typeof this._scrollbar?.el === 'string') {
206+
if (
207+
typeof this._scrollbar !== 'boolean' &&
208+
(typeof this._scrollbar?.el === 'string' || typeof this._scrollbar?.el === 'object')
209+
) {
201210
this.showScrollbar = false;
202211
}
203212
}

0 commit comments

Comments
 (0)