- Clone repository
- Run
npm installto install all dependencies - Run
npm run developto start local webpack server. This will open test page automatically in the browser and reload on any code changes.
The carousel is constructed by combining 2 classes: Container and Item. Various mixins are applied by default to all of these classes in order to extend their functionality and allow for a pluggable architecture.
Take a look at src/carousel.ts to get a better idea how the mixins are applied to the classes and test/page/index.ts to see how they are used to initialize the carousel.
| Mixin | Class | Description | Container Deps | Item Deps |
|---|---|---|---|---|
| AlignableCore | Container | Set/get align option | ||
| AlignableElement | Container | Automatically set align option by examining CSS styles applied to the element | AlignableCore ElementableCore |
|
| Autoplayable | Container | Allows automatic cycling through items | IndexableSelect | |
| Controllable | Container | Set/get controller instance | ItemizableCoreInstance Typeable BoxModelable AlignableCore DirectionableCoreMixin IndexableSelect Nudgeable |
|
| CssTransformableTranslate | Item | Set/get CSS transform: translate(...) style on element |
ElementableCore |