Configuring Components to Carousel

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.svg 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

 

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share