Gregory Chambers | gChambers
The slideshow example below is one of several approaches that can be employed using the Greensock Animation Platform (GSAP). The particular technique shown below is notable in that it is probably the most approachable of the methods available.
Another interesting aspect of this exercise is the use of a Grav plugin called Assets. This plugin allows the deployment of small, targeted stylesheet and scripts on a particular page. In this case, we've attached a small CSS stylesheet specifically for this slideshow and the vanilla JS script that GSAP needs to perform its functions. The .css and .js files are called from the enclosing folder that defined that page.
Slideshow Overview
The slideshow mechanics are pretty basic. Essentially, the images are aligned in a very long horizontal "filmstrip". Each button click shifts the "filmstrip" left by an amount equal to the width of one photo. The script counts and "remembers" each click. On the 6th click, the entire filmstrip is shifted to the right until the starting photo is displayed.
In order for this to work the photos need to be sized identically. The are placed in the html such that they are displayed one after the other with no gaps.
The height and width of the "viewport" is defined in theCSS. This measurement, in turn, is identical to the width and height of the individual photos. Everything that is not in the viewport is rendered invisible by the CSS.
The Assets plugin is quite useful in this case. Normally, styles and scripts need to be added to Grav on a global basis — that is, included on every page. This adds a lot of code bloat if these elements are only needed on a one-off basis.
This is where the Assets plugin comes in handy. It was specifically written for this situation. Using this plugin allows us to include the css and scripts on this one page only. Very useful!
The needed styles or scripts should be generated in their own files (.css or .js) stored in that root folder of the article.