WML Slicebox (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 Angular WML Slicebox library is an Angular-based library designed to enhance the visual interactivity of web applications by introducing a 3D slicebox carousel component. This library provides a sophisticated and engaging way to display images or content in a carousel format, with a 3D rotation effect that adds depth and dynamism to the user experience. Aimed at integrating seamlessly with Angular applications, Angular WML Slicebox offers a set of configurable options to tailor the carousel’s behavior and appearance, making it a versatile tool for developers looking to enhance their UI with 3D interactive elements.

At the heart of the Angular WML Slicebox library is the WMLSliceboxZeroComponent , which serves as the central component orchestrating the 3D slicebox carousel’s functionality. This component manages the carousel’s state, handles user interactions, and renders the 3D slices that comprise the carousel’s visual structure. Developers can customize the carousel through a variety of parameters, such as orientation, rotation speed, and disperse factor, allowing for a high degree of control over the carousel’s behavior and appearance. Additionally, the library provides mechanisms for dynamically loading content into the carousel and responding to user interactions, making it a flexible solution for presenting content in an engaging and interactive format. The component’s design encourages modularity and reusability, adhering to Angular’s component-based architecture, and offering developers a straightforward way to incorporate 3D carousel functionality into their applications.

Installation

Section titled “Installation”Terminal window npm install -s --verbose @windmillcode/wml-slicebox

Usage WMLSliceboxZeroModule

Section titled “Usage WMLSliceboxZeroModule”

Getting Started

Section titled “Getting Started”

Full Example

Section titled “Full Example”

Reference

Section titled “Reference”

WMLSliceboxZeroProps Configurations

Section titled “WMLSliceboxZeroProps Configurations”NameTypeDescriptionDefault ValueautoplaybooleanWhether the carousel should continue or nottruecolorHiddenSideshex value, rgba, hslaColor of the sides of the cuboid where the image is not shown’#222’cuboidsCountnumberThe number of cuboids to be used in the slicebox9disperseFactornumberHow far away in pixels should the cuboids coordinate to move away from the center40disperseSpeednumberTime in ms of how fast the cuboids coordinate to move away from the center4000easingcss animation easing typesThe animation type’ease-out’imagesWMLSliceboxZeroImg[]An array of images to provide to the slicebox[]intervalnumberMilliseconds before the carousel navigates if autoplay is true3000jumpToSlideSubjsubjectNot to be edited; used to indicate to the slicebox to jump to a specific slide when autoplay is false-moveToNextSlideSubjsubjectNot to be edited; used to indicate to the slicebox to move to the next slide when autoplay is false-moveToPrevSlideSubjsubjectNot to be edited; used to indicate to the slicebox to move to the previous slide when autoplay is false-nextRotationDegreecss degree stringWhen provided, overrides the default rotation to have the next slides rotate according to your desires'-90deg' if reverse is true, else '90deg'orientation’v''h’Whether to rotate vertically or horizontallyperspectivepx valueSame as perspective definition in graphic design10000prevRotationDegreecss degree stringWhen provided, overrides the default rotation to have the next slides rotate according to your desiresOpposite of nextRotationDegreeresizeDelaynumberAmount of time to debounce before the carousel resizes itself10reversebooleanWhether to reverse the default rotation overwritten of nextRotationDegree is setfalsesequentialFactornumberTime in ms before each cuboid consecutively rotates350sliceboxSizeUseProvidedValuesbooleanWhether to resize to fill the parent element or use specified height and width of the sliceboxfalsespeednumberHow fast each cuboid is supposed to rotate15660

Feel free to explore and use these configurations and methods to create a highly interactive and visually appealing carousel for your Angular applications!

Changelog

Section titled “Changelog”

v0.0.1

Section titled “v0.0.1”wml-select complete and readydisabled supportdefault value supportupdate component supportupdate via formcontrol support

v0.0.2

Section titled “v0.0.2”added WMLSelectZeroProps.updateOptionValuesWithOptionText so that if users wanted text and value they can usemade a minor change that will allow defaulr fields to populate under certain circumstances

v16.2.60

Section titled “v16.2.60”updated dependencies

v16.2.80

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package),

v16.2.80

Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,

v16.2.90

Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,

v16.2.91

Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package,

v16.2.93

Section titled “v16.2.93”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.100

Section titled “v16.2.100”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.110

Section titled “v16.2.110”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.120

Section titled “v16.2.120”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.10

Section titled “v17.0.10”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.11

Section titled “v17.0.11”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.20

Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package,

v17.0.40

Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,

v17.0.50

Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,

v17.0.60

Section titled “v17.0.60”updated package to reflect the version ^17.0.6 of @angular/core package,

v17.0.70

Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package,

v17.0.7100

Section titled “v17.0.7100”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7200

Section titled “v17.0.7200”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7300

Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.80

Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package,

v17.0.8100

Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8102

Section titled “v17.0.8102”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8103

Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9000

Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9001

Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.0000

Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package,

v17.1.2

Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.1000

Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.2000 [2/5/24]

Section titled “v17.1.2000 [2/5/24]”updated package to reflect the version ^17.1.2 of @angular/core package,

v17.1.2001 [2/8/24]

Section titled “v17.1.2001 [2/8/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.3000 [2/8/24]

Section titled “v17.1.3000 [2/8/24]”updated package to reflect the version ^17.1.3 of @angular/core package,

v17.2.1000 [2/17/24]

Section titled “v17.2.1000 [2/17/24]”updated package to reflect the version ^17.2.1 of @angular/core package,

v17.2.2001 [2/23/24]

Section titled “v17.2.2001 [2/23/24]”updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.3000 [2/28/24]

Section titled “v17.2.3000 [2/28/24]”updated package to reflect the version ^17.2.3 of @angular/core package,

v17.2.3001 [3/2/24]

Section titled “v17.2.3001 [3/2/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.3002 [3/5/24]

Section titled “v17.2.3002 [3/5/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4000 [3/8/24]

Section titled “v17.2.4000 [3/8/24]”updated package to reflect the version ^17.2.4 of @angular/core package,

v17.2.4001 [3/12/24]

Section titled “v17.2.4001 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4002 [3/12/24]

Section titled “v17.2.4002 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4003 [3/13/24]

Section titled “v17.2.4003 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4004 [3/13/24]

Section titled “v17.2.4004 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.0 [3/17/24]

Section titled “v17.3.0 [3/17/24]”updated package to reflect the version ^17.3.0 of @angular/core package ,

v17.3.1000 [3/22/24]

Section titled “v17.3.1000 [3/22/24]”updated package to reflect the version ^17.3.1 of @angular/core package,

v17.3.2000 [3/28/24]

Section titled “v17.3.2000 [3/28/24]”updated package to reflect the version ^17.3.2 of @angular/core package,

v17.3.3000 [4/4/24]

Section titled “v17.3.3000 [4/4/24]”updated package to reflect the version ^17.3.3 of @angular/core package,

v17.3.4000 [4/11/24]

Section titled “v17.3.4000 [4/11/24]”updated package to reflect the version ^17.3.4 of @angular/core package,

v17.3.4001 [4/16/24]

Section titled “v17.3.4001 [4/16/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.5000 [4/20/24]

Section titled “v17.3.5000 [4/20/24]”updated package to reflect the version ^17.3.5 of @angular/core package,

v17.3.5110 [5/1/24]

Section titled “v17.3.5110 [5/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.6000 [5/1/24]

Section titled “v17.3.6000 [5/1/24]”updated package to reflect the version ^17.3.6 of @angular/core package,

v17.3.7000 [5/9/24]

Section titled “v17.3.7000 [5/9/24]”updated package to reflect the version ^17.3.7 of @angular/core package,

v17.3.8000 [5/9/24]

Section titled “v17.3.8000 [5/9/24]”updated package to reflect the version ^17.3.8 of @angular/core package,

v17.3.9000 [5/16/24]

Section titled “v17.3.9000 [5/16/24]”updated package to reflect the version ^17.3.9 of @angular/core package,

v18.0.1 [5/23/24]

Section titled “v18.0.1 [5/23/24]”updated package to reflect the version ^18.0.0 of @angular/core package,

v18.0.4 [5/25/24]

Section titled “v18.0.4 [5/25/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.1000 [5/29/24]

Section titled “v18.0.1000 [5/29/24]”updated package to reflect the version ^18.0.1 of @angular/core package,

v18.0.2000 [6/6/24]

Section titled “v18.0.2000 [6/6/24]”updated package to reflect the version ^18.0.2 of @angular/core package,

v18.0.3000 [6/13/24]

Section titled “v18.0.3000 [6/13/24]”updated package to reflect the version ^18.0.3 of @angular/core package,

v18.0.3010 [6/18/24]

Section titled “v18.0.3010 [6/18/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.4000 [6/23/24]

Section titled “v18.0.4000 [6/23/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.5000 [6/26/24]

Section titled “v18.0.5000 [6/26/24]”updated package to reflect the version ^18.0.5 of @angular/core package,

v18.0.6000 [7/5/24]

Section titled “v18.0.6000 [7/5/24]”updated package to reflect the version ^18.0.6 of @angular/core package,

v18.1.4 [7/13/24]

Section titled “v18.1.4 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,

v18.1.6 [7/14/24]

Section titled “v18.1.6 [7/14/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.1000 [7/18/24]

Section titled “v18.1.1000 [7/18/24]”updated package to reflect the version ^18.1.1 of @angular/core package,

v18.1.2000 [7/24/24]

Section titled “v18.1.2000 [7/24/24]”updated package to reflect the version ^18.1.2 of @angular/core package,

v18.1.2300 [7/27/24]

Section titled “v18.1.2300 [7/27/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.2301 [7/30/24]

Section titled “v18.1.2301 [7/30/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta3 [8/1/24]

Section titled “v18.1.3000-beta3 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta4 [8/1/24]

Section titled “v18.1.3000-beta4 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3001

Section titled “v18.1.3001”[BREAKING CHANGES] changed from wml-slicebox to wml-slicebox-zero and replaced all Params with Props

v18.1.3002 [8/4/24]

Section titled “v18.1.3002 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3001 [8/4/24]

Section titled “v18.1.3001 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3003 [8/5/24]

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

v18.1.3004 [8/5/24]

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

v18.1.3005 [8/5/24]

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

v18.1.3006 [8/5/24]

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

v18.1.3007 [8/5/24]

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

v18.1.4000 [8/14/24]

Section titled “v18.1.4000 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4001 [8/14/24]

Section titled “v18.1.4001 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.0 [8/15/24]

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

v18.2.1 [8/20/24]

Section titled “v18.2.1 [8/20/24]”updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1000 [8/22/24]

Section titled “v18.2.1000 [8/22/24]”updated package to reflect the version 18.2.1 of @angular/core package

v18.2.2000 [8/30/24]

Section titled “v18.2.2000 [8/30/24]”updated package to reflect the version 18.2.2 of @angular/core package

v18.2.2100 [9/1/24]

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

v18.2.2101 [9/1/24]

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

v18.2.2200 [9/3/24]

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

v18.2.3000 [9/4/24]

Section titled “v18.2.3000 [9/4/24]”updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3100 [9/8/24]

Section titled “v18.2.3100 [9/8/24]”updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3110 [9/10/24]

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

v18.2.3112 [9/10/24]

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

v18.2.3200 [9/16/24]

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

v18.2.4000 [9/16/24]

Section titled “v18.2.4000 [9/16/24]”updated package to reflect the version 18.2.4 of @angular/core package

v18.2.4100 [9/19/24]

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

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/6/24]

Section titled “v18.2.7001 [10/6/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 SelectNext WML Table (Beta Unstable Unmaintainable)