The coherent-gameface-carousel
is part of the Gameface custom components suite. As most of the components in this suite it uses slots to allow dynamic content.
The coherent-gameface-carousel
component comes with UMD and CJS builds.
<script src="./node_modules/coherent-gameface-carousel/dist/carousel.production.min.js"></script>
- add the
coherent-gameface-carousel
component to your html:
<gameface-carousel>
<div slot="carousel-content">0</div>
<div slot="carousel-content">1</div>
<div slot="carousel-content">2</div>
<div slot="carousel-content">3</div>
<div slot="carousel-content">4</div>
<div slot="carousel-content">5</div>
<div slot="carousel-content">6</div>
<div slot="carousel-content">7</div>
</gameface-carousel>
This is all! Load the file in Gameface to see the coherent-gameface-carousel
.
If you wish to import the modules using JavaScript you can remove the script tags
which import the components and the coherent-gameface-carousel
from the node_modules
folder and import them like this:
import { Carousel } from 'coherent-gameface-carousel';
or simply
import 'coherent-gameface-carousel';
Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.
This is the index of the active item. It returns a number. You can set it and the carousel will scroll to the specified element. You must pass a number corresponding to an existing item in the carousel.
document.querySelector('gameface-carousel').currentItemIndex = 0;
When the currentItemIndex
is modified, the carousel will automatically apply the carousel-current-item
class to the active item. This class is available for styling purposes on the active item.
Returns an array of HTMLElements - the carousel items. Setting it will replace all current items with the ones from the array.
document.querySelector('gameface-carousel').items = [HTMLElementInstance, HTMLElementInstance1, HTMLElementInstanceN, ...];
Returns the index of the currently active page. Setting it will scroll the carousel to specified page.
document.querySelector('gameface-carousel').currentPage = 1;
The carousel supports a dynamic slot that is supposed to hold its items - carousel-content
. To add an item into this slot specify its slot attribute:
<div slot="carousel-content">7</div>
All elements that have this slot attribute will be initially added to the carousel.
These slots are reserved for the navigation controls that change the currently active carousel items. By default they are right and left pointing arrows. Set the slot attribute to next
or previous
to an element to use custom navigation controls:
<gameface-carousel>
<button slot="carousel-next">Next</div>
<button slot="carousel-previous">Prev</div>
<gameface-carousel>
addItem(element, index)
Use the addItem
method to add a new item:
-
element
- the new carousel item that should be added -
[index]
- the index at which to add the new item
const carouselItem = document.createElement('div');
carouselItem.textContent = 'Hello, there!';
document.querySelector('gameface-carousel').addItem(carouselItem);
removeItem(index)
Use the removeItem
method to remove an item:
-
[index]
- the index of the item that is to be removed, if omitted - will remove the first element
document.querySelector('gameface-carousel').removeItem();
Use the pageSize
setter to change the number of simultaneously visible elements.
document.querySelector('gameface-carousel').pageSize = 3;
Sometimes it may be necessary to navigate the carousel programmatically. This can be achieved by using the next()
and previous()
properties of the carousel.
For example if we want to use the mouse scroll to navigate:
document.querySelector('gameface-carousel').addEventListener('wheel', (e) => {
if (e.deltaY > 0) {
document.querySelector('gameface-carousel').next();
} else {
document.querySelector('gameface-carousel').previous();
}
});
Or if we want to use the left and right keyboard keys:
document.addEventListener('keydown', (e) => {
if (e.keyCode === 39) {
document.querySelector('gameface-carousel').next();
}
if (e.keyCode === 37) {
document.querySelector('gameface-carousel').previous();
}
});
Currently all items in the carousel must have the same width and height otherwise the component will not be properly resized.
Using the carousel component with data-binding is straightforward.
We add our data-bindings to the <component-slot>
like this:
<gameface-carousel class="carousel-component">
<div
slot="carousel-content"
class="box"
data-bind-for="item:{{carousel.items}}"
>
<div
data-bind-value="{{item.id}}"
data-bind-style-background-color="{{item.color}}">
</div>
</div>
</gameface-carousel>
And then we need to re-render the controls:
document.querySelector('gameface-carousel').rerenderControls();
The reason we do that is because, the carousel will intialize before the data-binding and the control won't be rendered properly. The same principle applies every time we change the number of elements in the model, since the carousel controls won't be changed automatically.