Skip to content

Commit

Permalink
feat: custom html element support
Browse files Browse the repository at this point in the history
  • Loading branch information
@vltansky
vltansky committed Mar 24, 2021
1 parent 3aad554 commit f96db02
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 71 deletions.
138 changes: 70 additions & 68 deletions playground/angular/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,87 +73,89 @@
<button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>

{{ exampleConfig | json }}
</div>
<div>
<swiper
#swiper
[slidesPerView]="1"
[centeredSlides]="true"
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
[navigation]="{ prevEl: prevEl, nextEl: nextEl }"
[pagination]="pagination"
>
<ng-template swiperSlide *ngFor="let slide of slides2; index as i">
{{ i }} - {{ slide }}
</ng-template>
</swiper>
<button type="button" class="swiper-navigation-prev">&lt;</button>
<button type="button" class="swiper-navigation-next">&gt;</button>
<button type="button" #nextEl class="swiper-navigation-prev">&lt;</button>
<button type="button" #prevEl class="swiper-navigation-next">&gt;</button>
<hr />
<button (click)="replaceSlides()">replace slides</button>
<button (click)="togglePagination()">Toggle pagination</button>
</div>
<div>
<swiper
[slidesPerView]="1"
[spaceBetween]="50"
[navigation]="true"
[pagination]="{ clickable: true }"
[thumbs]="{ swiper: thumbsSwiper }"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
<swiper
[slidesPerView]="3"
[spaceBetween]="50"
(swiper)="setThumbsSwiper($event)"
[navigation]="{}"
[pagination]="{ clickable: true }"
[scrollbar]="{ draggable: true }"
[watchSlidesVisibility]="true"
[watchSlidesProgress]="true"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
</div>
<div>
<swiper
[slidesPerView]="1"
[spaceBetween]="50"
[navigation]="true"
[pagination]="{ clickable: true }"
[controller]="{ control: controlledSwiper }"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
<swiper
[slidesPerView]="3"
[spaceBetween]="50"
(swiper)="setControlledSwiper($event)"
[navigation]="{}"
[pagination]="{ clickable: true }"
[scrollbar]="{ draggable: true }"
[watchSlidesVisibility]="true"
[watchSlidesProgress]="true"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
</div>
<swiper
[slidesPerView]="1"
[spaceBetween]="50"
[navigation]="true"
[pagination]="{ clickable: true }"
[thumbs]="{ swiper: thumbsSwiper }"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
<swiper
[slidesPerView]="3"
[spaceBetween]="50"
(swiper)="setThumbsSwiper($event)"
[navigation]="{}"
[pagination]="{ clickable: true }"
[scrollbar]="{ draggable: true }"
[watchSlidesVisibility]="true"
[watchSlidesProgress]="true"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
</div>
<div>
<swiper
[slidesPerView]="1"
[spaceBetween]="50"
[navigation]="true"
[pagination]="{ clickable: true }"
[controller]="{ control: controlledSwiper }"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
<swiper
[slidesPerView]="3"
[spaceBetween]="50"
(swiper)="setControlledSwiper($event)"
[navigation]="{}"
[pagination]="{ clickable: true }"
[scrollbar]="{ draggable: true }"
[watchSlidesVisibility]="true"
[watchSlidesProgress]="true"
>
<ng-template swiperSlide>Slide 1</ng-template>
<ng-template swiperSlide>Slide 2</ng-template>
<ng-template swiperSlide>Slide 3</ng-template>
<ng-template swiperSlide>Slide 4</ng-template>
<ng-template swiperSlide>Slide 5</ng-template>
<ng-template swiperSlide>Slide 6</ng-template>
</swiper>
</div>
</main>
15 changes: 12 additions & 3 deletions src/angular/src/swiper.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,10 @@ export class SwiperComponent implements OnInit {
});
if (
typeof this._navigation !== 'boolean' &&
(typeof this._navigation?.nextEl === 'string' || typeof this._navigation?.prevEl === 'string')
(typeof this._navigation?.nextEl === 'string' ||
typeof this._navigation?.prevEl === 'string' ||
typeof this._navigation?.nextEl === 'object' ||
typeof this._navigation?.prevEl === 'object')
) {
this.showNavigation = false;
}
Expand All @@ -181,7 +184,10 @@ export class SwiperComponent implements OnInit {
this._pagination = setProperty(val, {
el: current || null,
});
if (typeof this._pagination !== 'boolean' && typeof this._pagination?.el === 'string') {
if (
typeof this._pagination !== 'boolean' &&
(typeof this._pagination?.el === 'string' || typeof this._pagination?.el === 'object')
) {
this.showPagination = false;
}
}
Expand All @@ -197,7 +203,10 @@ export class SwiperComponent implements OnInit {
this._scrollbar = setProperty(val, {
el: current || null,
});
if (typeof this._scrollbar !== 'boolean' && typeof this._scrollbar?.el === 'string') {
if (
typeof this._scrollbar !== 'boolean' &&
(typeof this._scrollbar?.el === 'string' || typeof this._scrollbar?.el === 'object')
) {
this.showScrollbar = false;
}
}
Expand Down

0 comments on commit f96db02

Please sign in to comment.