Carousel is a slideshow component for cycling through a series of content.
import { DaffSfCarouselComponent } from '@daffodil/storefront/carousel'
@Component()
class DaffSfCarouselComponent {
readonly faChevronRight: IconDefinition = faChevronRight
readonly faChevronLeft: IconDefinition = faChevronLeft
items: Signal<readonly DaffSfCarouselItemDirective[]> = contentChildren(DaffSfCarouselItemDirective, { read: TemplateRef<any> })
swiperElement: Signal<ElementRef<SwiperNativeElement>> = viewChild<unknown,ElementRef<SwiperNativeElement>>('swiperElement', { read: ElementRef<any> })
swiperRef: Swiper = undefined
@Input() options: DaffSfCarouselOptions
}
DaffSfCarouselOptions| Default | – |
|---|---|
| Description |
import { DaffSfCarouselItemDirective } from '@daffodil/storefront/carousel'
@Directive()
class DaffSfCarouselItemDirective {}
import { DaffSfCarouselOptions } from '@daffodil/storefront/carousel'
The options for a carousel.
interface DaffSfCarouselOptions {
spaceBetween: number
slidesPerView: number | "auto"
}
import { DAFF_SF_CAROUSEL_COMPONENTS } from '@daffodil/storefront/carousel'
const DAFF_SF_CAROUSEL_COMPONENTS: readonly [typeof DaffSfCarouselComponent, typeof DaffSfCarouselItemDirective]