Basics 1H - Hash

This is a carousel that uses the hash parameter in the URL (e.g., basic1h.html#2) to turn to a specific side. This is useful for accessibility and for bookmarking a page to load the appropriate side.

Usage:

1. Like previous carousels, we need to initialize it. But in this case, we'll assign it to a variable (i.e., pc) for easy reference.

   
   // Initialize carousel
   var pc = Panther.Carousel;
   
   pc.init({
       id: 'carousel1',
       backgroundColor: 'rgba(209, 209, 209, 0.9)'
   });
                                   

2. To get the hash value, we use the browser's location.hash property and the Carousel turnTo method.

   
   // Handle page load
   var side = location.hash.substr(1);
   if (side) {
       pc.turnTo('carousel1', side);
   }
                                   

3. The above step handles the intial page load, but to handle any URL changes, we need to add a hashchange event.

   
   // Handle hash changes
   window.addEventListener('hashchange', function (ev) {
       var parts = ev.newURL.split('#');
       var side = parts[1];
       pc.turnTo('carousel1', side);
   }, false);