Get Elements Hive

Circular Image Carousel

Turn your images into an interactive circular carousel with ease. The element gives you total control over the look and feel of the carousel with responsive settings so you can size and position the carousel as needed on different breakpoints. It includes several entrance animations, animation triggers, animated image preview, first-class integrations with the Interactions extension and more.

Content Tab

Images:

  • Images: The list of images to use in the carousel

Images Options:

  • Lazy Load: Whether to Lazy Load the images or not
  • Preview Image on Click: When enabled, clicking on an image will open it in Preview Mode.

 

Design Tab

Carousel Container:

Contains settings for the wrapper element of the carousel. Think of it as the visible viewport/canvas where the carousel ( or parts of it ) can be visible.
The width/height settings here do not control the size of the carousel itself!

  • Width: The container width
  • Height: The container Height
  • Fade Edges: When enabled, applies a gradient that blends the carousel with the background of the parent element
  • Fade Axis: The axis where the Fade Effect is applied
  • Fade Size: The size of the faded portion

Background:

Standard background controls preset applied to the Carousel Container.

Carousel:

  • Radius: The Carousel Radius. This is effectively the actual size of the carousel, in combination with the images size you set, it will also determine the gap between the images.
  • Horizontal Position: The horizontal position of the Carousel inside the Carousel Container. You can type values outside the defined range when needed.
  • Vertical Position: The vertical position of the Carousel inside the Carousel Container. You can type values outside the defined range when needed.
  • Start/Anchor Angle: The angle in degrees. This value allows you to control two things, First, this will define the Start Position where the images will be animated to during the Entrance Animation. Second, it defines the Anchor Location where the carousel will snap/locks after a rotation animation is completed.

Images:

  • Width: The images width
  • Height: The images height
  • Border: The images borders styling
  • Filters: The CSS filters applied on the images
  • Flip Vertically: Flip the images vertically. This is useful when you’re setting you Start/Angle Anchor to somewhere in the bottom half of the carousel circumference.

Entrance Animation Trigger:

Controls when the entrance animation runs

  • Trigger: When the Entrance Animation should start
    • On Page Load: When the page loads
    • On Viewport Entrance: Scroll-based trigger. Default is when the Top of the carousel container reaches the center of the viewport.
    • Using Interactions Extension: Animation is controlled via the Interactions extension. You need to define an Interaction to define when to run the animation using the appropriate Action.
  • Trigger Location Element: The vertical position of the element in % to use for the On Viewport Entrance Trigger Type. Example: With a value of 0%, the animation will run when the top of the element reaches the percentage of the viewport defined in the Trigger Location Viewport ( 0% is the top of the element and 100% is the bottom of the element )
  • Trigger Location Viewport: The vertical position of the viewport in % to use for the On Viewport Entrance Type. Example: With a value of 80%, the animation will run when the element location defined in Trigger Location Element reaches the 80% mark of the viewport ( 0% is the top of the viewport and 100% is the bottom of the viewport )
  • Debug Markers: Debug markers to help visualize the location trigger locations above. Note: These will also be visible on the frontend, you should disable them when your done.

Entrance Animation

Controls the entrance and circular layout animations

  • Entrance: The entrance animation variant to use. Note: The Start/Anchor Angel will also shift the start position of the Entrance Animation, Example: Using Vertical Up, with the default Start/Anchor Angle of 0, the images will start the animation from the bottom of the container to the 0 degree location. But with a Start/Anchor Angle of 90, the images will start animating from the left of the container.
  • Circular Layout: The animation part that aligns the images along the circumference of the carousel
  • Entrance Duration: Duration of the Entrance Animation in seconds
  • Circular Layout Duration: Duration of the Circular Layout Animation in seconds

Captions

  • Show Captions: Whether to show image captions or not. Captions are taken from whatever is defined on the image in WordPress
  • Visibility: Controls when the Captions are visible
    • Always: Captions are always visible. Note: Captions will not be visible during rotation and when an image is previewed
    • Active Item: Caption are only visible on the active item.
    • Manual: The caption are not visible on the carousel. Use this option if you need the captions on the page’s markup but don’t necessarily want them to be visible on the carousel itself.
  • Position: The captions position
    • Top: On the top of the images
    • Bottom: On the bottom of the images
  • Typography: The captions typography

Image Preview

  • Image Width: The previewed image width when in Preview Mode
  • Image Height: The previewed image height when in Preview Mode