I've been spending some time trying to figure out how to style the .active.center slide that was created by the Ngx Owl Carousel structural directive.
In the image below, you can see a .owl-item.active.center that was generated by the
<ng-template carouselSlide>.owl-item.active.center.
https://i.sstatic.net/EihsG.png
Here is what I have tried:
Template:
<owl-carousel-o [options]="testimonialsCarousel" (change)="getData($event)" class="w-100">
<ng-container *ngFor="let testimonial of testimonials">
<ng-template carouselSlide>
<article #testimonialarticle class="d-flex flex-column align-items-center
shadow p-4 m-3 text-center testing-class">
<figure><img class="img-circle" [src]="testimonial.avatar" [alt]="testimonial.avatarAlt"></figure>
<p>{{testimonial.text}}</p>
<p>{{testimonial.author}}</p>
</article>
</ng-template>
</ng-container>
</owl-carousel-o>
My TypeScript:
// Carousel Class that uses OnInit
export class RowClientsComponent implements OnInit {
testimonialsCarousel: OwlOptions = {
center: true,
dots: true,
autoplay: false,
loop: true,
autoplayTimeout: 5000,
autoplaySpeed: 1000,
smartSpeed: 1000,
autoplayHoverPause: true,
autoWidth: true,
items: 3
}
testimonials: Testimonial[] = [
// Data for Slides...
]
activeSlides?: SlidesOutputData = new SlidesOutputData;
getData(data: SlidesOutputData) {
this.activeSlides = data;
if (this.activeSlides && this.activeSlides.slides) {
for (const slide of this["activeSlides"].slides) {
if (slide.center === true) {
console.log('Centralized Slide:', slide);
}
}
}
}
@ViewChild('testimonialarticle')
classArticle: ElementRef = new ElementRef('testimonialarticle');
ngOnInit() {
console.log(this.classArticle);
this.renderer.selectRootElement('#testimonialarticle').setStyle(this, "background-color", "black");
}
constructor(private renderer: Renderer2) {
}
}