Basics 1C - Callback

This is a carousel that triggers a callback function after a turn. This can be useful for fetching additional content, or recording when a user has seen each panel.

Usage:

1. To specify a callback, add a callback attribute when you initialize your carousel.

   
   Panther.Carousel.init({
       id: 'carousel1',
       backgroundColor: 'rgba(209, 209, 209, 0.9)',
       callback: app.loadContent
   });
                                   

2. Define your callback function to do something. In this example, we're just appending a timestamp to the panel content.

   
   app.loadContent = function (c) {
       var panels = c.element.querySelectorAll('figure>div[class=panther-Carousel-panelContent]');
       var html = 'Panel ';
   
       if (c.sideIndex == 0) { html += 'one'; }
       else if (c.sideIndex == 1) { html += 'two'; }
       else if (c.sideIndex == 2) { html += 'three'; }
       else if (c.sideIndex == 3) { html += 'four'; }
   
       html += ' was turned at ' + new Date().toLocaleTimeString() + '<br>';
   
       panels[c.sideIndex].innerHTML += html;
   };