Slideshow
Creating an animated Slideshow is easy to do in Quest. It is important to set up the layer order in a way that Quest can easily convert it into a functioning HTML experience.
To fast track doing this, we have created a sample Figma file for you. Simply copy and paste the slideshow frames into your design and import them into Quest. Then just add the slideshow feature in Quest editor and it will automatically create an animated, interactive slideshow for you that you can adjust settings on.
To see a working sample slideshow project, click this link below:
To get started, visit this Figma Sample project:
Inside this file, you’ll find 3 different sets of Slideshows you can copy and paste into your own page design. As long as the layer order stays the same, it is easy to add the Slideshow feature to each frame once imported into Quest
While you can set constraints on everything individually and play with things to see how you’d like them, we created the 3 different slideshow “templates” for you to just speed up the process based on how you’d like your slideshow to work.
- 1.Pixel Perfect Slideshow in all screen sizes
- 2.Responsive Slideshow with padding around the slides
- 3.Responsive Slideshow that fills the width of the screen (best for backgrounds)
Each of these 3 options have slightly different layouts and constraints setup but their layer order and structure are all the same. You can add more or less slides to each but you can fully redesign each slide to your taste. Even the arrows and navigation dots can fully be redesigned or totally repositioned. As long as the layer structure stays the same, you are free to experiment with the look and feel of the slides and the slideshow interface.
Adding or Removing Slides
If you don’t want to use 5 slides like the sample, you can delete ones you don’t need and replace the images. Adding slides is as easy as duplicating the last slide frame. You will simply need to be sure the slide order follows the same naming pattern: “slide_1, slide_2, slide_3, etc.”.
You can also add anything to the slide frames as well, it doesn’t have to simply be an image. You can add text layers and buttons that have individual interactions such as lunaching URLs or having rollover effects. You can even replace images with video or iFrames. Just make sure every element is contained inside the slide.
Slide progress / Navigation Dots
The dots at the bottom of the slideshow are designed there to communicate the slide the user is seeing in the list. You can simply turn this off if you don’t want to use it. If you want to use it, be sure to do the same thing with the dots by deleting or duplicating the “nav_1, nav_2, nav_3, etc.” frames to match the same amount of slides you are using in your slideshow.
If you open each navigation frame you will see there is an on and off layer. You can freely change these as you see fit by changing color, shape, replacing with animated GIFs you import… Feel free to get creative. Also, their position is centered on the slideshow but they can really be in any position on the page you’d like.
Unified Slideshow
Just like every other available feature, if your layers are all in the same order across all the frames you import to represent different device views. So whatever settings you apply to one breakpoint will apply to them all. If your structure is not unified, you will have to set up the Slideshow feature on all breakpoints you want it to apply to.
Read more about it on the Unified Layers & Clear Code lesson.
Using the Slideshow Feature in Quest
Once you import your page design (or simply import the slideshow from the sample Figma file to test it out), you need to find the group in Quet called “Slideshow” and then add the Slideshow feature using the Add Feature + button in the right-side panel. This will only work if the layer structure has been maintained and you will not see the Slideshow feature otherwise.
Once you’ve added the Slideshow feature, you can check out how it works by Previewing or Publishing the page to see it animate and how the interactions will work.
There are several settings in the feature that you’re free to tweak and adjust.
- 1.Duration
This time value is how long it takes to transition from slide to slide. Set it to 0 to make the transition be instantaneous.
- 1.Interval
This is the amount of time the slides will pause before moving to the next slide.
- 1.Animation Type
Choose which animation type you want to use to transition to the next slide.
- 1.Animation Trigger
Use this to determine how you’d like transition slides. Do you want to only move to the next slide when a user presses an arrow or to move automatically or to allow both options.
- 1.Pause/Play on Hover
Check this on or off if you want the slides to pause animating to the next slide while the cursor is hovering over the slideshow.
- 1.Ease Type
Here you can change the exact type of animation for the slides. You can make it smooth or use fun styles like bounce.
NOTE:
When using the slideshow on a mobile device or tablet, you can swipe left or right to move to the next slide without having to press the next or previous arrows.