@windmillcode/angular-wml-carousel

WML Carousel (3D)

starlightViewModes.switchTofunction h(){const t=window.location.hash;document.querySelectorAll(".starlight-view-modes-switcher-a").forEach(e=>{e.href&&(e.href=e.href.split("#")[0]+t)})}h();window.addEventListener("hashchange",h);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.

Installation

Section titled “Installation”Terminal window

npm install -s --verbose @windmillcode/wml-carousel @windmillcode/wml-components-base

Caveats

Section titled “Caveats”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 sliadesafter 8 slides there are issues re arraging the slides to not overlapif you are to put elements directly beneath the carousel you may have margin and resize problms

Usage

Section titled “Usage”

WMLCarouselOneComponent

Section titled “WMLCarouselOneComponent”

Getting Started

Section titled “Getting Started”

Handling Slide Events

Section titled “Handling Slide Events”

Customizing Slides

Section titled “Customizing Slides”

Customizing Controls

Section titled “Customizing Controls”

References

Section titled “References”

WMLCarouselOneProps

Section titled “WMLCarouselOneProps”

Properties

Section titled “Properties”

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

Methods

Section titled “Methods”

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

WMLCarouselOneSlideProps

Section titled “WMLCarouselOneSlideProps”

Properties

Section titled “Properties”

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

Methods

Section titled “Methods”

Name	Signature	Description
init	(): void	Initializes the slide properties and adds the custom component

WMLCarouselOneControlProps

Section titled “WMLCarouselOneControlProps”

Properties

Section titled “Properties”

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

Methods

Section titled “Methods”

Name	Signature	Description
init	(): void	Initializes the control properties and adds the custom component

WMLCarouselOneSlideExampleProps

Section titled “WMLCarouselOneSlideExampleProps”

Properties

Section titled “Properties”

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

WMLCarouselOneControlExampleProps

Section titled “WMLCarouselOneControlExampleProps”

Properties

Section titled “Properties”

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

Changelog

Section titled “Changelog”

v18.2.4200 [9/21/24]

Section titled “v18.2.4200 [9/21/24]”first version of library

v18.2.4200 [9/21/24]

Section titled “v18.2.4200 [9/21/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.5001 [9/22/24]

Section titled “v18.2.5001 [9/22/24]”updated package to reflect the version 18.2.5 of @angular/core package

v18.2.6000 [10/1/24]

Section titled “v18.2.6000 [10/1/24]”updated package to reflect the version 18.2.6 of @angular/core package

v18.2.7000 [10/2/24]

Section titled “v18.2.7000 [10/2/24]”updated package to reflect the version 18.2.7 of @angular/core package

v18.2.7001 [10/5/2024 10:45:12 AM EST]

Section titled “v18.2.7001 [10/5/2024 10:45:12 AM EST]”[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.

v18.2.7001 [10/5/24]

Section titled “v18.2.7001 [10/5/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.7010 [10/9/24]

Section titled “v18.2.7010 [10/9/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.7020 [10/10/24]

Section titled “v18.2.7020 [10/10/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.8000 [10/10/24]

Section titled “v18.2.8000 [10/10/24]”updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8000 [10/11/24]

Section titled “v18.2.8000 [10/11/24]”updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

Section titled “v18.2.8001 [10/11/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.9000 [10/23/24]

Section titled “v18.2.9000 [10/23/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.10000 [10/31/24]

Section titled “v18.2.10000 [10/31/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.11000 [11/7/24]

Section titled “v18.2.11000 [11/7/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.12000 [11/15/24]

Section titled “v18.2.12000 [11/15/24]”updated package to conform with @windmillcode/wml-components-base

v18.2.12001 [11/17/24]

Section titled “v18.2.12001 [11/17/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.0 [11/19/24]

Section titled “v19.0.0 [11/19/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.3 [11/20/24]

Section titled “v19.0.3 [11/20/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.4 [11/26/24]

Section titled “v19.0.4 [11/26/24]”updated package to conform with @windmillcode/wml-components-base

v19.0.1000 [11/26/24]

Section titled “v19.0.1000 [11/26/24]”updated package to conform with @windmillcode/wml-components-basePrevious WML ButtonNext WML Chips