When a left button is clicked,
how are images moved from right to left ?
when a right button is clicked,
how are images moved from left to right ?
Thanks.
Hi @alexseo,
We actually have a full-length tutorial on making the slider here.
The slider is a fairly complex piece of animation. At the heart of the animation are each of the thumbnails in the div with a class of pgia-gallery-thumbnails. The first in the series has several animations linked to it:“Open”, “SetAsCurrent”, “ScrollToThumbnail”, “UpdateCount”. These animations on the first are cloned to each of the other thumbnails by an “Apply To Many” Interaction. These animation provide animation to the thumbnails and a way to keep track of the current image being displayed.
Looking at the navigation buttons. To simplify adding them to the page and to make the animation easy to add to new elements, only the left button gets animation added and the “Apply To Many” is used to add it to the right. The animation that is added to each is a custom animation called “ScrollTo”. It targets the parent div with a class of pgia-gallery. It has an animation of “Play” which will play a named animation from the page. In this case the name of the animation is taken from the data attribute of the button using $target.data-scroll-to.
If you look at the code of the button that attribute is set to “prev”
Looking at the top most div we can see the “prev” animation defined.
The “prev” animation itself links together 4 animations, the same ones set on the individual slides. Following what each animation does you can see it loads all the information from the thumbnail image into the placeholder at the top and then shows the slide and adds the class, pgia-current.
At the same time it hides the previous slide. The “HideSlide” Interaction is the one that causes the previous slide to slide down by translating the Y position by 100%.
I encourage you to look through the tutorial and also to experiment/follow the logic of the blueprint.
Cheers,
Bob
1 Like