Download on GitHub

Section Use

Kool Swap can be used sitewide and/or with a selector.

Click a tab to switch content!


Unlike the sitewide initialisation the selector has to be added in to the initialisation code:

   swapTriggerBox : '.tabs',
   bouncingBoxes : '.description, footer',
   bouncingBoxHandling : 'slide',
   direction: 'left-to-right',
   moveSwapBoxClasses : true,
   positionType : 'absolute',
   outEasing : '.easeInOutCirc',
   inEasing : 'easeOutBack',

Define the contents with the href to the target page and a selector with the data-ks-load-selector attribute to load the contents from:

                        <a href="/demo/options.html" data-ks-load-selector="#events">Events</a>

Remember to reinitiate with the ksSwapCallback event.