Skip to content

Commit

Permalink
feat(angular): custom classes
Browse files Browse the repository at this point in the history
  • Loading branch information
vltansky committed Jan 26, 2021
1 parent 9159d89 commit acc678a
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 2 deletions.
2 changes: 1 addition & 1 deletion playground-angular/src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<ng-template swiperSlide>Slide</ng-template>
</swiper>
<swiper [zoom]="true">
<ng-template swiperSlide [zoom]="true">
<ng-template swiperSlide class="custom-class" [zoom]="true">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</ng-template>
<ng-template swiperSlide>
Expand Down
1 change: 1 addition & 0 deletions src/angular/src/swiper-slide.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { coerceBooleanProperty } from './utils/utils';
})
export class SwiperSlideDirective {
@Input() virtualIndex: number;
@Input() class: string = '';
@Input()
set zoom(val: boolean) {
this._zoom = coerceBooleanProperty(val);
Expand Down
6 changes: 5 additions & 1 deletion src/angular/src/swiper.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,11 @@
<ng-template #slidesTemplate let-loopSlides="loopSlides" let-slideKey="key">
<div
*ngFor="let slide of loopSlides | async"
[ngClass]="slideClass + ' ' + (slideKey !== '' ? slideDuplicateClass : '')"
[ngClass]="
(slide.class ? slide.class + ' ' : '') +
slideClass +
(slideKey !== '' ? ' ' + slideDuplicateClass : '')
"
[attr.data-swiper-slide-index]="slide.virtualIndex ? slide.virtualIndex : slide.slideIndex"
[style]="style"
[ngSwitch]="slide.zoom"
Expand Down
19 changes: 19 additions & 0 deletions src/angular/src/swiper.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -512,6 +512,25 @@ export class SwiperComponent implements OnInit {
}
this._changeDetectorRef.detectChanges();
},
_slideClasses: (_, updated) => {
updated.forEach(({ slideEl, classNames }, index) => {
const slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index')) || index;
if (this.virtual) {
const virtualSlide = this.slides.find((item) => {
return item.virtualIndex && item.virtualIndex === slideIndex;
});
if (virtualSlide) {
virtualSlide.classNames = classNames;
return;
}
}

if (this.slides[slideIndex]) {
this.slides[slideIndex].classNames = classNames;
}
});
this._changeDetectorRef.detectChanges();
},
});
new Swiper(this.elementRef.nativeElement, swiperParams);
}
Expand Down
3 changes: 3 additions & 0 deletions src/components/core/core-class.js
Original file line number Diff line number Diff line change
Expand Up @@ -294,10 +294,13 @@ class Swiper {
emitSlidesClasses() {
const swiper = this;
if (!swiper.params._emitClasses || !swiper.el) return;
const updates = [];
swiper.slides.each((slideEl) => {
const classNames = swiper.getSlideClasses(slideEl);
updates.push({ slideEl, classNames });
swiper.emit('_slideClass', slideEl, classNames);
});
swiper.emit('_slideClasses', updates);
}

slidesPerViewDynamic() {
Expand Down
8 changes: 8 additions & 0 deletions src/types/swiper-events.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,14 @@ export interface SwiperEvents {
*/
_slideClass?: (swiper: Swiper, el: HTMLElement, classNames: string) => void;

/**
* INTERNAL: Event will fired after setting CSS classes on all swiper slides
*/
_slideClasses?: (
swiper: Swiper,
slides: { el: HTMLElement; classNames: string; index: number }[],
) => void;

/**
* INTERNAL: Event will fired as soon as swiper instance available (before init)
*/
Expand Down

0 comments on commit acc678a

Please sign in to comment.