The library is for carousels of all different types
The WMLCarouselOneComponent
is an Angular component that provides a customizable 3D carousel experience. It allows developers to create interactive and dynamic carousels with customizable slides and controls. The functionality of the component is in the prop class passed to the component so if you have your own 3d carousel you would like to design all you need to worry about is styling.It is designed to be flexible and extendable, enabling developers to tailor the carousel to their specific needs.
Key features include:
Customizable Slides : Each slide can be customized with its own content and styling.
Customizable Controls : Controls for navigating the carousel can be customized.
Responsive Design : The carousel adjusts its layout based on the window size.
Dynamic Animation : Smooth transitions and animations when rotating between slides.
npm install -s --verbose @windmillcode/wml-carousel @windmillcode/wml-components-base
increasing the height of the container seems to mess with it because of the margining you would mostly likely have to resize the custom component you pass in the classes for sliades
after 8 slides there are issues re arraging the slides to not overlap
if you are to put elements directly beneath the carousel you may have margin and resize problms
Property Type Description id
string
Unique identifier for the carousel slides
Array<WMLCarouselOneSlideProps>
Array of slide object controls
Array<WMLCarouselOneControlProps>
Array of control objects slideContainer
WMLUIProperty
Style and class configuration for the slide container controller
WMLAngularMotionUIProperty
Configuration for the carousel controller currentSlideNumber
number
Index of the current slide setStateSubj
Subject<WMLCarouselOneProps>
Subject to handle state updates setState
(WMLCarouselOneProps)=>void
Updates the state of the class slideDistanceFromCenter
string
Distance of slides from the center slideDistanceFromTop
string
Distance of slides from the top
Name Signature Description init
(): void
Initializes the carousel properties listenForSlideContainerResize
(): Observable<void>
Listens for window resize events to approriately resize the slide container rotateToSlide
(slideNumber: number): void
Rotates to the specified slide number updateSlides
(): void
Updates the slide configurations getAngle
(): number
Calculates the angle between slides calculateSlideHeight
(parentWidth: number, parentHeight: number): number
Calculates the slide height based on container size calculateSlideWidth
(parentWidth: number, parentHeight: number): number
Calculates the slide width based on container size calculateSlideDistanceFromCenter
(parentWidth: number, parentHeight: number): number
Calculates the distance of slides from the center calculateSlideDistanceFromTop
(parentWidth: number, parentHeight: number): number
Calculates the distance of slides from the top calculatePerspective
(parentWidth: number, parentHeight: number): number
Calculates the perspective for the carousel
Property Type Description id
string
Unique identifier for the slide custom
WMLCustomComponent
Custom component for the slide content view
WMLMotionUIProperty
Style and motion configuration for the slide setStateSubj
Subject<WMLCarouselOneSlideProps>
Subject to handle state updates setState
(WMLCarouselOneSlideProps)=>void
Updates the state of the class slideViewContainerRef
ViewContainerRef
Reference to the slide’s view container
Name Signature Description init
(): void
Initializes the slide properties and adds the custom component
Property Type Description id
string
Unique identifier for the control custom
WMLCustomComponent
Custom component for the control content view
WMLMotionUIProperty
Style and motion configuration for the control setStateSubj
Subject<WMLCarouselOneControlProps>
Subject to handle state updates setState
(WMLCarouselOneControlProps)=>void
Updates the state of the class controlViewContainerRef
ViewContainerRef
Reference to the control’s view container
Name Signature Description init
(): void
Initializes the control properties and adds the custom component
Property Type Description id
string
Unique identifier for the slide example value
any
Value to display in the slide example setStateSubj
Subject<WMLCarouselOneSlideExampleProps>
Subject to handle state updates setState
(WMLCarouselOneSlideExampleProps)=>void
Updates the state of the class
Property Type Description id
string
Unique identifier for the control example value
any
Value to display in the control example setStateSubj
Subject<WMLCarouselOneControlExampleProps>
Subject to handle state updates setState
(WMLCarouselOneControlExampleProps)=>void
Updates the state of the class
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 18.2.5 of @angular/core package
updated package to reflect the version 18.2.6 of @angular/core package
updated package to reflect the version 18.2.7 of @angular/core package
[PATCH] Changed WMLCarouselOneProps in wml-carousel-one.component.ts. You can now only change the slide when controller.motionState is either “closed” or “open”. This helps stop unwanted changes to slides during transitions.
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 18.2.8 of @angular/core package
updated package to reflect the version 18.2.8 of @angular/core package
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 19.0.2 of @angular/core package
updated package to reflect the version 19.0.3 of @angular/core package
updated package to reflect the version 19.0.4 of @angular/core package
updated package to reflect the version 19.0.5 of @angular/core package
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 19.0.6 of @angular/core package
updated package to reflect the version 19.0.7 of @angular/core package
updated package to reflect the version 19.1.0 of @angular/core package
updated package to reflect the version 19.1.1 of @angular/core package
updated package to reflect the version 19.1.2 of @angular/core package
updated package to reflect the version 19.1.3 of @angular/core package
update package to support the react native ecosystem
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 19.1.4 of @angular/core package
updated package to reflect the version 19.1.5 of @angular/core package
updated package to reflect the version 19.1.6 of @angular/core package
updated package to reflect the version 19.1.7 of @angular/core package
updated package to reflect the version 19.1.8 of @angular/core package
updated package to reflect the version 19.2.0 of @angular/core package
updated package to reflect the version 19.2.1 of @angular/core package
updated package to reflect the version 19.2.2 of @angular/core package
updated package to reflect the version 19.2.3 of @angular/core package
updated package to reflect the version 19.2.4 of @angular/core package
updated package to reflect the version 19.2.5 of @angular/core package
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to conform with @windmillcode/wml-components-base
updated package to reflect the version 19.2.8 of @angular/core package
updated package to reflect the version 19.2.9 of @angular/core package
updated package to reflect the version 19.2.10 of @angular/core package