We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
currently the carousel component needs to know how many slots are being provided in order to dynamically bind everything together.
<pe-carousel slots$=${this.content.length}> ${ this.content.map(this.generateSlotTemplate) } </pe-carousel>
generateCarouselContent() { return new Array(this.slots).fill(null).map((item, index) => { const isActiveSlot = index === this.activeIndex ? 'active-slot' : 'slot'; return html` <div class$="${isActiveSlot}"><slot name$="slide${index + 1}"></slot> `; }); }
Not sure if there would be any performance issues query for number of <slot> elements internally within the component itself instead, i.e.
<slot>
generateCarouselContent() { const slots = this.$('slot'); return slots.length.map((item, index) => { const isActiveSlot = index === this.activeIndex ? 'active-slot' : 'slot'; return html` <div class$="${isActiveSlot}"><slot name$="slide${index + 1}"></slot> `; }); }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
currently the carousel component needs to know how many slots are being provided in order to dynamically bind everything together.
Not sure if there would be any performance issues query for number of
<slot>
elements internally within the component itself instead, i.e.The text was updated successfully, but these errors were encountered: