[ Web Proxy ]
URL:
Viewing: https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-slicebox [Back]  [Original]

WML Slicebox (3D) | Windmillcode CDK Skip to content
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

WML Slicebox (3D)

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 carousels 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 carousels functionality. This component manages the carousels state, handles user interactions, and renders the 3D slices that comprise the carousels 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 carousels 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 components design encourages modularity and reusability, adhering to Angulars component-based architecture, and offering developers a straightforward way to incorporate 3D carousel functionality into their applications.

Terminal window
npm install -s --verbose @windmillcode/wml-slicebox

WMLSliceboxZeroProps Configurations

Section titled WMLSliceboxZeroProps Configurations
NameTypeDescriptionDefault Value
autoplaybooleanWhether the carousel should continue or nottrue
colorHiddenSideshex 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 slicebox9
disperseFactornumberHow far away in pixels should the cuboids coordinate to move away from the center40
disperseSpeednumberTime in ms of how fast the cuboids coordinate to move away from the center4000
easingcss animation easing typesThe animation typeease-out
imagesWMLSliceboxZeroImg[]An array of images to provide to the slicebox[]
intervalnumberMilliseconds before the carousel navigates if autoplay is true3000
jumpToSlideSubjsubjectNot 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'
orientationv | hWhether to rotate vertically or horizontallyv
perspectivepx valueSame as perspective definition in graphic design10000
prevRotationDegreecss degree stringWhen provided, overrides the default rotation to have the next slides rotate according to your desiresOpposite of nextRotationDegree
resizeDelaynumberAmount of time to debounce before the carousel resizes itself10
reversebooleanWhether to reverse the default rotation overwritten of nextRotationDegree is setfalse
sequentialFactornumberTime in ms before each cuboid consecutively rotates350
sliceboxSizeUseProvidedValuesbooleanWhether to resize to fill the parent element or use specified height and width of the sliceboxfalse
speednumberHow 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!

  • wml-select complete and ready
    • disabled support
    • default value support
    • update component support
    • update via formcontrol support
  • added WMLSelectZeroProps.updateOptionValuesWithOptionText so that if users wanted text and value they can use
  • made a minor change that will allow defaulr fields to populate under certain circumstances
  • updated dependencies
  • updated package to reflect the version 16.2.80 of @angular/core package),
  • updated package to reflect the version 16.2.80 of @angular/core package,
  • updated package to reflect the version 16.2.90 of @angular/core package,
  • updated package to reflect the version 16.2.91 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
  • updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
  • updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
  • updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
  • updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
  • updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
  • updated package to reflect the version ^17.0.2 of @angular/core package,
  • updated package to reflect the version ^17.0.4 of @angular/core package,
  • updated package to reflect the version ^17.0.5 of @angular/core package,
  • updated package to reflect the version ^17.0.6 of @angular/core package,
  • updated package to reflect the version ^17.0.7 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.0.8 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.1.0 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.1.2 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.1.3 of @angular/core package,
  • updated package to reflect the version ^17.2.1 of @angular/core package,
  • updated package to reflect the version ^17.2.2 of @angular/core package,
  • updated package to reflect the version ^17.2.3 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.2.4 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.3.0 of @angular/core package ,
  • updated package to reflect the version ^17.3.1 of @angular/core package,
  • updated package to reflect the version ^17.3.2 of @angular/core package,
  • updated package to reflect the version ^17.3.3 of @angular/core package,
  • updated package to reflect the version ^17.3.4 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.3.5 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^17.3.6 of @angular/core package,
  • updated package to reflect the version ^17.3.7 of @angular/core package,
  • updated package to reflect the version ^17.3.8 of @angular/core package,
  • updated package to reflect the version ^17.3.9 of @angular/core package,
  • updated package to reflect the version ^18.0.0 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^18.0.1 of @angular/core package,
  • updated package to reflect the version ^18.0.2 of @angular/core package,
  • updated package to reflect the version ^18.0.3 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^18.0.5 of @angular/core package,
  • updated package to reflect the version ^18.0.6 of @angular/core package,
  • updated package to reflect the version ^18.1.0 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to reflect the version ^18.1.1 of @angular/core package,
  • updated package to reflect the version ^18.1.2 of @angular/core package,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base ,
  • updated package to conform with @windmillcode/angular-wml-components-base

[BREAKING CHANGES] changed from wml-slicebox to wml-slicebox-zero and replaced all Params with Props

  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to reflect the version 18.2.1 of @angular/core package
  • updated package to reflect the version 18.2.2 of @angular/core package
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to reflect the version 18.2.3 of @angular/core package
  • updated package to reflect the version 18.2.3 of @angular/core package
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/angular-wml-components-base
  • updated package to conform with @windmillcode/wml-components-base
  • updated package to reflect the version 18.2.4 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 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
  • 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 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
  • updated package to reflect the version 19.2.11 of @angular/core package
  • updated package to reflect the version 19.2.12 of @angular/core package
  • updated package to reflect the version 19.2.13 of @angular/core package
  • updated package to reflect the version 19.2.14 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 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

Web Proxy Viewer  |  New URL  |  Original Page