Full width image carousel


(pedro delgado) #1

Hello. I’m new to hype and i have a website to design, i’ve been fondling around with it and creating some fun stuff and even mix javascript with it. But now that i want to really progress with the website creation, everything i actually need, i can’t find it. I’ve been searching for a full width image carousel and a tutorial for it but i can’t find what i want. Kinda like this one (click on the orange icon “Mywebsite”), i did this myself in php and now on hype idk why i’m just super confused and lost. This is what i made so far. I’ve been even trying to add just a keyframe and i can’t find how to which feels ridiculous …
Carousel.hype.zip (263.5 KB)
I might be close but i can’t find the tutorials i feel like they’re “necessary”. Maybe i’m not looking at the right place. Thank you


(Mark Hunte) #2

Wow there sport you sure you got the right site :smiling_imp:


(pedro delgado) #3

Pretty sure :joy:


(Mark Hunte) #4

Try setting the scene to scale the width ; scene inspector.

Then pin the left arrow to the left, the right arrow to the right; metrics inspector (pins & sizing)

Each image pin left & right and size the <-> width

You may need to adjust the size of those images to be deeper.

Add a pause timeline action on the end of each transition.


(pedro delgado) #5

Wow, that’s looking so much better. Thank you.
I still have a couple more question.
To size the width of the images, I need to put in the same px as my screen width? or can i set it to always be 100%? cause i have 100% checked and it doesn’t fill the screen. EDIT: I found it, i think, i clicked the left and right arrows.
What you mean by adjusting the size to be deeper?
How do i add a pause timeline action? I’ve been struggling to find that, it’s been my number one problem… EDIT: Found a thread showing where it was!

Thank you so much for your help anyway


(pedro delgado) #6

Is there a way to make it go by every 3 seconds or something like that, and also when i click? I was thinking jump to time but that wouldnt work would it?


(Mark Hunte) #7

Post what you have so far…

The is more than one way.

but the simplest is to use the timeline.