YAC Carousel (Yet Another Carousel)

Development

Setup

1. Clone repository
2. Run npm install to install all dependencies
3. Run npm run develop to start local webpack server. This will open test page automatically in the browser and reload on any code changes.

Architecture

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.

Mixins

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