[ Web Proxy ]
URL:
Viewing: https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-carousel [Back]  [Original]
WML Carousel (3D) | Windmillcode CDK Skip to content
Windmillcode CDK
CtrlK
Cancel
Select version 20.1.6000 20.1.5000 20.1.4000 20.1.3000 20.1.2000 20.1.1000 20.1.0 20.0.6000 20.0.5000 20.0.4000 20.0.3000 20.0.2000 20.0.1000 20.0.0 19.2.14000 19.2.13000 19.2.12000 19.2.11000 19.2.10000 19.2.10000 19.2.9000 19.2.8000 19.2.7000 19.2.6000 19.2.5100 19.2.5001 19.2.5000 19.2.4000 19.2.3000 19.2.2000 19.2.1000 19.2.0 19.1.8000 19.1.7000 19.1.6000 19.1.5000 19.1.4000 19.1.3000 19.1.2000 19.1.1000 19.1.0 19.0.7000 19.0.6000 19.0.5000 19.0.4000 19.0.3000 19.0.2000 19.0.1000 19.0.0 18.2.12000 18.2.11000 18.2.10000 18.2.9000 18.2.8000 18.2.7000 18.2.6000 18.2.5000 18.2.4200 18.2.4100 18.2.4000 18.2.3200 18.2.3100 Select theme DarkLightAuto
Select version 20.1.6000 20.1.5000 20.1.4000 20.1.3000 20.1.2000 20.1.1000 20.1.0 20.0.6000 20.0.5000 20.0.4000 20.0.3000 20.0.2000 20.0.1000 20.0.0 19.2.14000 19.2.13000 19.2.12000 19.2.11000 19.2.10000 19.2.10000 19.2.9000 19.2.8000 19.2.7000 19.2.6000 19.2.5100 19.2.5001 19.2.5000 19.2.4000 19.2.3000 19.2.2000 19.2.1000 19.2.0 19.1.8000 19.1.7000 19.1.6000 19.1.5000 19.1.4000 19.1.3000 19.1.2000 19.1.1000 19.1.0 19.0.7000 19.0.6000 19.0.5000 19.0.4000 19.0.3000 19.0.2000 19.0.1000 19.0.0 18.2.12000 18.2.11000 18.2.10000 18.2.9000 18.2.8000 18.2.7000 18.2.6000 18.2.5000 18.2.4200 18.2.4100 18.2.4000 18.2.3200 18.2.3100 Select theme DarkLightAuto
On this page

On this page

View Modes

WML Carousel (3D)

starlightViewModes.switchTo

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 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

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
PropertyTypeDescription
idstringUnique identifier for the carousel
slidesArray<WMLCarouselOneSlideProps>Array of slide object
controlsArray<WMLCarouselOneControlProps>Array of control objects
slideContainerWMLUIPropertyStyle and class configuration for the slide container
controllerWMLAngularMotionUIPropertyConfiguration for the carousel controller
currentSlideNumbernumberIndex of the current slide
setStateSubjSubject<WMLCarouselOneProps>Subject to handle state updates
setState(WMLCarouselOneProps)=>voidUpdates the state of the class
slideDistanceFromCenterstringDistance of slides from the center
slideDistanceFromTopstringDistance of slides from the top

Methods

Section titled Methods
NameSignatureDescription
init(): voidInitializes the carousel properties
listenForSlideContainerResize(): Observable<void>Listens for window resize events to approriately resize the slide container
rotateToSlide(slideNumber: number): voidRotates to the specified slide number
updateSlides(): voidUpdates the slide configurations
getAngle(): numberCalculates the angle between slides
calculateSlideHeight(parentWidth: number, parentHeight: number): numberCalculates the slide height based on container size
calculateSlideWidth(parentWidth: number, parentHeight: number): numberCalculates the slide width based on container size
calculateSlideDistanceFromCenter(parentWidth: number, parentHeight: number): numberCalculates the distance of slides from the center
calculateSlideDistanceFromTop(parentWidth: number, parentHeight: number): numberCalculates the distance of slides from the top
calculatePerspective(parentWidth: number, parentHeight: number): numberCalculates the perspective for the carousel

WMLCarouselOneSlideProps

Section titled WMLCarouselOneSlideProps

Properties

Section titled Properties
PropertyTypeDescription
idstringUnique identifier for the slide
customWMLCustomComponentCustom component for the slide content
viewWMLMotionUIPropertyStyle and motion configuration for the slide
setStateSubjSubject<WMLCarouselOneSlideProps>Subject to handle state updates
setState(WMLCarouselOneSlideProps)=>voidUpdates the state of the class
slideViewContainerRefViewContainerRefReference to the slides view container

Methods

Section titled Methods
NameSignatureDescription
init(): voidInitializes the slide properties and adds the custom component

WMLCarouselOneControlProps

Section titled WMLCarouselOneControlProps

Properties

Section titled Properties
PropertyTypeDescription
idstringUnique identifier for the control
customWMLCustomComponentCustom component for the control content
viewWMLMotionUIPropertyStyle and motion configuration for the control
setStateSubjSubject<WMLCarouselOneControlProps>Subject to handle state updates
setState(WMLCarouselOneControlProps)=>voidUpdates the state of the class
controlViewContainerRefViewContainerRefReference to the controls view container

Methods

Section titled Methods
NameSignatureDescription
init(): voidInitializes the control properties and adds the custom component

WMLCarouselOneSlideExampleProps

Section titled WMLCarouselOneSlideExampleProps

Properties

Section titled Properties
PropertyTypeDescription
idstringUnique identifier for the slide example
valueanyValue to display in the slide example
setStateSubjSubject<WMLCarouselOneSlideExampleProps>Subject to handle state updates
setState(WMLCarouselOneSlideExampleProps)=>voidUpdates the state of the class

WMLCarouselOneControlExampleProps

Section titled WMLCarouselOneControlExampleProps

Properties

Section titled Properties
PropertyTypeDescription
idstringUnique identifier for the control example
valueanyValue to display in the control example
setStateSubjSubject<WMLCarouselOneControlExampleProps>Subject to handle state updates
setState(WMLCarouselOneControlExampleProps)=>voidUpdates 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-base

v19.0.2000 [12/4/24]

Section titled v19.0.2000 [12/4/24]
  • updated package to reflect the version 19.0.2 of @angular/core package

v19.0.3000 [12/6/24]

Section titled v19.0.3000 [12/6/24]
  • updated package to reflect the version 19.0.3 of @angular/core package

v19.0.4000 [12/12/24]

Section titled v19.0.4000 [12/12/24]
  • updated package to reflect the version 19.0.4 of @angular/core package

v19.0.5000 [12/19/24]

Section titled v19.0.5000 [12/19/24]
  • updated package to reflect the version 19.0.5 of @angular/core package

v19.0.5002 [12/29/24]

Section titled v19.0.5002 [12/29/24]
  • updated package to conform with @windmillcode/wml-components-base

v19.0.5100 [12/29/24]

Section titled v19.0.5100 [12/29/24]
  • updated package to conform with @windmillcode/wml-components-base

v19.0.6000 [1/12/25]

Section titled v19.0.6000 [1/12/25]
  • updated package to reflect the version 19.0.6 of @angular/core package

v19.0.7000 [1/16/25]

Section titled v19.0.7000 [1/16/25]
  • updated package to reflect the version 19.0.7 of @angular/core package

v19.1.0 [1/17/25]

Section titled v19.1.0 [1/17/25]
  • updated package to reflect the version 19.1.0 of @angular/core package

v19.1.1000 [1/17/25]

Section titled v19.1.1000 [1/17/25]
  • updated package to reflect the version 19.1.1 of @angular/core package

v19.1.2000 [1/23/25]

Section titled v19.1.2000 [1/23/25]
  • updated package to reflect the version 19.1.2 of @angular/core package

v19.1.3000 [1/23/25]

Section titled v19.1.3000 [1/23/25]
  • updated package to reflect the version 19.1.3 of @angular/core package

v19.1.3100 [1/23/25]

Section titled v19.1.3100 [1/23/25]
  • update package to support the react native ecosystem

v19.1.3111 [1/27/25]

Section titled v19.1.3111 [1/27/25]
  • updated package to conform with @windmillcode/wml-components-base

v19.1.3112 [1/28/25]

Section titled v19.1.3112 [1/28/25]
  • updated package to conform with @windmillcode/wml-components-base

v19.1.4000 [1/31/25]

Section titled v19.1.4000 [1/31/25]
  • updated package to reflect the version 19.1.4 of @angular/core package

v19.1.5000 [2/8/25]

Section titled v19.1.5000 [2/8/25]
  • updated package to reflect the version 19.1.5 of @angular/core package

v19.1.6000 [2/13/25]

Section titled v19.1.6000 [2/13/25]
  • updated package to reflect the version 19.1.6 of @angular/core package

v19.1.7000 [2/21/25]

Section titled v19.1.7000 [2/21/25]
  • updated package to reflect the version 19.1.7 of @angular/core package

v19.1.8000 [3/4/25]

Section titled v19.1.8000 [3/4/25]
  • updated package to reflect the version 19.1.8 of @angular/core package

v19.2.0 [3/4/25]

Section titled v19.2.0 [3/4/25]
  • updated package to reflect the version 19.2.0 of @angular/core package

v19.2.1000 [3/9/25]

Section titled v19.2.1000 [3/9/25]
  • updated package to reflect the version 19.2.1 of @angular/core package

v19.2.2000 [3/15/25]

Section titled v19.2.2000 [3/15/25]
  • updated package to reflect the version 19.2.2 of @angular/core package

v19.2.3000 [3/21/25]

Section titled v19.2.3000 [3/21/25]
  • updated package to reflect the version 19.2.3 of @angular/core package

v19.2.4000 [3/27/25]

Section titled v19.2.4000 [3/27/25]
  • updated package to reflect the version 19.2.4 of @angular/core package

v19.2.5000 [4/3/25]

Section titled v19.2.5000 [4/3/25]
  • updated package to reflect the version 19.2.5 of @angular/core package

v19.2.5001 [4/6/25]

Section titled v19.2.5001 [4/6/25]
  • updated package to conform with @windmillcode/wml-components-base

v19.2.5100 [4/10/25]

Section titled v19.2.5100 [4/10/25]
  • updated package to conform with @windmillcode/wml-components-base

v19.2.6000 [4/10/25]

Section titled v19.2.6000 [4/10/25]
  • updated package to conform with @windmillcode/wml-components-base

v19.2.7000 [4/21/25]

Section titled v19.2.7000 [4/21/25]
  • updated package to conform with @windmillcode/wml-components-base

v19.2.8000 [4/24/25]

Section titled v19.2.8000 [4/24/25]
  • updated package to reflect the version 19.2.8 of @angular/core package

v19.2.9000 [5/1/25]

Section titled v19.2.9000 [5/1/25]
  • updated package to reflect the version 19.2.9 of @angular/core package

v19.2.10000 [5/8/25]

Section titled v19.2.10000 [5/8/25]
  • updated package to reflect the version 19.2.10 of @angular/core package

v19.2.11000 [5/15/25]

Section titled v19.2.11000 [5/15/25]
  • updated package to reflect the version 19.2.11 of @angular/core package

v19.2.12000 [5/22/25]

Section titled v19.2.12000 [5/22/25]
  • updated package to reflect the version 19.2.12 of @angular/core package

v19.2.13000 [5/24/25]

Section titled v19.2.13000 [5/24/25]
  • updated package to reflect the version 19.2.13 of @angular/core package

v19.2.14000 [5/28/25]

Section titled v19.2.14000 [5/28/25]
  • updated package to reflect the version 19.2.14 of @angular/core package

v19.2.14001 [6/11/25]

Section titled v19.2.14001 [6/11/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.0.0 [6/29/25]

Section titled v20.0.0 [6/29/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.0.1000 [6/30/25]

Section titled v20.0.1000 [6/30/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.0.2000 [6/30/25]

Section titled v20.0.2000 [6/30/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.0.3000 [7/2/25]

Section titled v20.0.3000 [7/2/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.0.4000 [7/2/25]

Section titled v20.0.4000 [7/2/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.0.5000 [7/2/25]

Section titled v20.0.5000 [7/2/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.0.6000 [7/27/25]

Section titled v20.0.6000 [7/27/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.1.0 [7/27/25]

Section titled v20.1.0 [7/27/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.1.1000 [7/27/25]

Section titled v20.1.1000 [7/27/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.1.2000 [7/28/25]

Section titled v20.1.2000 [7/28/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.1.3000 [7/28/25]

Section titled v20.1.3000 [7/28/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.1.4000 [8/1/25]

Section titled v20.1.4000 [8/1/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.1.5000 [8/9/25]

Section titled v20.1.5000 [8/9/25]
  • updated package to conform with @windmillcode/wml-components-base

v20.1.6000 [8/14/25]

Section titled v20.1.6000 [8/14/25]
  • updated package to conform with @windmillcode/wml-components-base
Previous
WML Button Next
WML Chips
Web Proxy Viewer  |  New URL  |  Original Page