Swipe Gallery. HTML5 Component..2.. swipegallery.css ... - Google

.>. Instantiation and Event Handling
Wait for the Enabler to be initialised:
// Set up our point of entry.
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
Instantiating the component is straightforward
function init() {
var gallery = new studio.innovation.components.SwipeGallery(config);
}
Immediately following instantiation, you can set up listeners and callback for the SLIDE custom event. When a user
slides to an image, the event slideX is raised where X is a number starting from 0 and counting upward depending
on how many images are in the gallery.
gallery.addEventListener('slide0', function() {
console.log('slide0');
Enabler.counter("slide - image 1");
});
gallery.addEventListener('slide1', function() {
console.log('slide1');
Enabler.counter("slide - image 2");
});
gallery.addEventListener('slide2', function() {
console.log('slide2');
Enabler.counter("slide - image 3");
});
gallery.addEventListener('slide3', function() {
console.log('slide3');
Enabler.counter("slide - image 4");
});
.NOTE:. The Enabler.counter() call is a custom Rich Media counter which will appear within the Rich Media report for your creative, allowing you
to easily see which of your images was viewed the most. For more information on setting up Rich Media Counters see our help centre .here.
To actually show the component you must call the render method and supply the parent container. The parent
container can be any valid element.
gallery.render(document.getElementById('gallery'));
Finally, a method is available for you to jump to any slide in the gallery. The two parameters it takes are the slide
index number (starting at index 0) and the animation duration, in milliseconds.
gallery.slide(3, 300);
gallery.slide(2, 3000);
gallery.slide(0, 1000);