Carousel using symbols

Sorry I keep asking so many questions folks. I must say I really appreciate the boards here and all the help and I am learning so much!!

So I have this cool little carousel I am working on and for the life of me I can't seem to get it to work well in reverse. I think I am close! It seems to be working pretty well up until slides 4-5. I am wondering if it is because some of my buttons are overlapping? Does anyone have any suggestions on how to prevent that and make this function better? I will have 50 slides with photos to input into here so that is why I am trying to do it as a series of symbols instead of one continuous symbol as it would be way too wide to manage. Any suggestions would be so much appreciated!
carouseltest.hype.zip (35.4 KB)

Here is a carousel using Hype Data Magic:
carousel.hype.zip (60,6 KB)

3 Likes

Wow, that is really cool Max! Thank you so much. I will study it to see how it works!

You can also use fewer cards like so…

fancy_carousel.hype.zip (329,1 KB)

8 Likes

Here is yet another template based on this approach:

3 Likes

Inspired by the Keynote:

https://screenshots.maxziebell.de/rPWOcR2fbjem4oeFlhZB

Download:
iMessage_carousel.hype.zip (264,7 KB)

5 Likes

Thank you soooo much for all of these samples. I'm going to have a look through and check them all out. I was just on an extended vacation but this is so much appreciated Max!

1 Like

Wow, this one is the bomb. Thought they are all really great.
Not sure if it is too much to ask but wondering if you would mind explaining to me briefly how this javascript functions? I see it is based on a reverse and forward mechanism.
And I see how the animation is designed to move slide 2 and slide 3 into the viewport but how does the code bring slide 1 and slide 4 into view? If I was to add more slides to this type of carousel how would I adjust the animation and the timeline actions? Sorry I am still trying to learn javascript.

1.) the data is assigned by “binding” an data object to a rectangle using Hype Data Magic
2.) the data is then interpreted by a “Handler” that defaults to replacing the inner HTML
3.) you can also use the image handler or define your own. Have a look at the GitHub page of Hype Data Magic
4. The animation now does an “Magic” trick. It shifts the array content of the data the elements are bound to. After the animation completes it jumps back to the beginning but the shift (and refresh) give you the illusion that the jump to start hasn’t occurred

Hope that makes sense.

PS: you could also not use the trick and put as many cards on stage as needed and bind them to each array index. This “trick” on the other hand allows for an infinite amount of cards.

PPS: the main concept of Hype Data Magic is to provide a data path to the data we set in ahead HTML using an dataset attribute called “data-magic-key”. In the files I also use the concept of “data-magic-branch”. Let me give you an example:

cards[0].name would be a full key but you can also split any data path into a branch and the remaining key. Say cards[0] could be a branch and all rectangles in a group that had this branch bound to it would only need to define am the remainder like name. That is great for symbols as you put the branch outside onto the symbol and the main fields inside as key.

Following me?

PS: I am on the Road and will later add some screenshots

3 Likes

Gosh, so sorry for the delay responding. I got sidetracked. I will think on this and see if I can understand! Appreciated your reply Max!

I like your @MaxZieb solution, it is visually impressive and adding of items is easy for a regular no-js user. I understand that the intention of the carousel is to achieve infinite loops. I am wondering what code could be possibly added / altered in your setup to make a definite amount of loops let's say one full loop and /or stop on a specific item in the array preventing further looping. Happy to hear what's possible.

Sure the cards advance through playing a timeline. So, you can just add a condition to the trigger for the timeline (function looking if a condition is met before playing the timeline, rather then playing it directly). In the examples there is a button or in some examples there is a swipe trigger that would need that condition.

2 Likes