When showing partial slide, can we add opacity to partial slides

[briankitt]

My user want's a partial slide on the left and right of the carousel

I do this with 'perView: 3.5'

The carousel is working perfectly.

Now the user is asking if we can add opacity to the slides on the edges. Only show them at maybe 50% opacity since they are only partially shown.

If' I could add a class to make opacity 50% when they slide is only partially shown, that would be perfect. But I can't seem to find a good way to do that.

[briankitt]

I solved it as follows:

I'm using angular, so I added an ngClass on my image as follows: [ngClass]="{'hideSlide': hideSlide(row)}

.hideSlide { opacity: 0.2; }

The function for hideSlide is:

public hideSlide(slide: number): boolean { if (!this.slider || !this.slider.slides) return true; return this.slider.track.details.slides[slide].portion < .8; }

// Note, the portion is 1 when 100% of the slide is displayed, .8 would mean 80% of the slide is visible.