Enabling carousel for a component

How do I enable carousel functionality for a component?

Note: This is brand new (as of 9/14), we're going to be making continuous updates to this over the coming weeks. However, if you have specific feedback, feel free to email help@unstack.com and let us know what you think!

 

Is your carousel pausing for a long period? Right now, when you hover a carousel it pauses on the current slide. This is purposeful functionality, however, we'll be adding better visual cues to inform visitors that pause is occurring.

Build it with me video

Step-by-step

  1. First, you'll want to add a component to your page.
  2. Once you have a component created you'll click the carousel carousel icon to enable carousel functionality.

    Editing New page 2020-09-14 at 12.34.05 PM
  3. After clicking that you'll notice three differences within the component:
    Editing New page 2020-09-14 at 12.34.53 PM
    - The "type" will change to Carousel
    - The text "Slide 1" will appear on the left of the main toolbar
    - A plus icon will appear to the right of "Slide 1"
  4. Now that you have this setup you'll have the option to add additional components inside this component. The best part being: those components may be of different or the same type.

    (i.e., even if the initial component was a callout type, you can add a media type as a slide.)
  5. To add a new click click the plus icon and select the component type you'd like to use. Once you've done that, if you'd like to toggle through slides, simply click the text of the slide you'd like to toggle to.

    (i.e., if you want to toggle to Slide 3, click the "Slide 3" text in the upper left of the main toolbar)
  6. Now: Add the slides you'd like within your carousel
  7. Then, click the carousel carousel icon again to toggle the sub-toolbar for carousel which is where we'll control the transition speed, slide timing, and animation style.

    Editing New page 2020-09-14 at 12.44.58 PM

    The "transition-delay" is the amount of time the slide will display for, "transition time" is how long the animation will occur for, and the animation style is either:
    - fly up
    - fly in from the left
    - fly down
    - fly in from the right
    - expand

Notable examples

  1. Logos, using carousel you can show-off all the companies you've worked with:

    Screen Recording 2020-09-14 at 12.54.41 PM