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”

References

Section titled “References”

$3

Section titled “WMLCarouselOneProps”

$3

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

$3

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

$3

Section titled “WMLCarouselOneSlideProps”

$3

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

$3

Section titled “Methods”

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

$3

Section titled “WMLCarouselOneControlProps”

$3

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

$3

Section titled “Methods”

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

$3

Section titled “WMLCarouselOneSlideExampleProps”

$3

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

$3

Section titled “WMLCarouselOneControlExampleProps”

$3

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”

$3

[Section titled “v18.2.4200 [9/21/24]”](#v1824200-92124)first version of library

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

[Section titled “v18.2.8000 [10/10/24]”](#v1828000-101024)updated package to reflect the version 18.2.8 of @angular/core package

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

[Section titled “v19.0.1000 [11/26/24]”](#v1901000-112624)updated package to conform with @windmillcode/wml-components-basePrevious
WML Button Next
WML Chips

WML Carousel (3D)

Key features include:

Installation

Section titled “Installation”Terminal window

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

Caveats

Usage

Section titled “Usage”

$3

Section titled “WMLCarouselOneComponent”

$3

Section titled “Getting Started”

$3

Section titled “Handling Slide Events”

$3

Section titled “Customizing Slides”

$3

Section titled “Customizing Controls”

References

Section titled “References”

$3

Section titled “WMLCarouselOneProps”

$3

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

$3

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

$3

Section titled “WMLCarouselOneSlideProps”

$3

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

$3

Section titled “Methods”

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

$3

Section titled “WMLCarouselOneControlProps”

$3

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

$3

Section titled “Methods”

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

$3

Section titled “WMLCarouselOneSlideExampleProps”

$3

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

$3

Section titled “WMLCarouselOneControlExampleProps”

$3

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”

$3

[Section titled “v18.2.4200 [9/21/24]”](#v1824200-92124)first version of library

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

[Section titled “v18.2.8000 [10/10/24]”](#v1828000-101024)updated package to reflect the version 18.2.8 of @angular/core package

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

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

$3

[Section titled “v19.0.1000 [11/26/24]”](#v1901000-112624)updated package to conform with @windmillcode/wml-components-basePrevious
WML Button Next
WML Chips

@windmillcode/angular-wml-carousel

WML Carousel (3D)

Installation

Caveats

Usage

$3

$3

$3

$3

$3

References

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Changelog

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

@windmillcode/angular-wml-carousel

WML Carousel (3D)

Installation

Caveats

Usage

$3

$3

$3

$3

$3

References

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Changelog

$3

$3

$3

$3

$3

$3

$3

$3

$3