Swiper Carousel

There are two Swiper Carousel Components within the Image Component Set.

Swiper Cover Flow Carousel

Add up to 10 images that your app users can swipe through. Adjust how many images appear in the user view, allowing users to see multiple slides at once. Each image has the option to link to an existing app page or external link.

Swiper Image Carousel 

Add up to 10 images and customize the pagination to your brand needs. Each image can incorporate a color overlay with a headline and body copy.

Ideas for Using Swiper Cover Flow and Image Carousel

  • Use as a menu on a page. Set the images as your menu icons, set slides per view to the number of images you’d like to display at a time, and link each icon to a page on your app.
  • Build this out to use as a gallery for your homepage. You can highlight product photos, featured products, or company photos here.
  • Show a product gallery on a product page. Add photos of the product from different angles or show the product in action. If you need to show more than 10 products, stack multiple carousels for additional photos.
    • Pro Tip: Use Controls to control how fast or slow each image is shown to users.

Looking for other gallery options? Check out Avatar Carousel, or Card Carousel.

Swiper Cover Flow Carousel Properties

The Swiper Cover Flow Carousel component has the following properties:

  • Component Id - Sets the name of the Image Slide component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

    Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
  • Carousel Max Height (px) - Set the height in pixels, between 0-1,000 px.
  • Controls
    • Autoplay Toggle - Toggles on or off whether or not the slides scroll automatically. 
    • Autoplay Delay (ms) - Sets how many seconds each slide will display if Autoplay is toggled on. 
    • Slides Per View - Sets how many slides are viable in the view. Maximum of three.
    • Space Between Slides- Sets the amount of space in pixels between slides.
  • Individual Slide Properties (Up to 10)
    • Image - Upload a .JPG or .PNG to display an Image. To remove an uploaded Image, click on the Trash Can.

      Pro Tip: Optimize all Images for the web to increase app performance and shorten load time.
    • Link - Sets the link to another Page in the app or an external URL.

      Pro Tip: Type in tel:5558675309 to link to a phone number with "5558675309" replaced with the applicable 10-digit phone number or mailto:emailaddress to open up the default email client from the app with "emailaddress" replaced with the email address you want to be sent the email.
    • Open in New Tab -  Toggle on or off to open the link in a new tab. Default is set to off. 

Swiper Image Carousel Properties

The Swiper Image Carousel component has the following properties:

  • Component Id - Sets the name of the component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

    Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
  • Carousel Max Height (px) - Set the height in pixels 
  • Controls
    • Toggle Autoplay - Toggles on or off whether or not the slides scroll automatically. 
    • Autoplay Delay (ms) - Sets how many seconds each slide will display if Autoplay is toggled on. 
    • Navigation -  Toggles on and off to add left and right navigation arrows to the component.
    • Navigation Color - Set the color of the navigation arrows. There are two ways to set the Navigation Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.  
    • Pagination - Set the Pagination style. Choose from Bullet, Fraction, or Progress Bar. 
    • Pagination Color - Set the color of the Pagination. There are two ways to set the Pagination Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 
    • Transition - Set the transition method between images. Choose either Slide or Fade.
    • Space Between Slides (px) - Sets the amount of space in pixels between slides.
  • Individual Slide Properties (Up to 10)
    • Image - Upload a .JPG or .PNG to display an Image. To remove an uploaded Image, click on the Trash Can.

      Pro Tip: Optimize all Images for the web to increase app performance and shorten load time.
    • Link - Sets the link to another Page in the app or an external URL.

      Pro Tip: Type in tel:5558675309 to link to a phone number with "5558675309" replaced with the applicable 10-digit phone number or mailto:emailaddress to open up the default email client from the app with "emailaddress" replaced with the email address you want to be sent the email.
    • Open in New Tab - Toggle on or off to open the link in a new tab. Default is set to off. 
    • Background Overlay -  Toggle on or off to display the Background Overlay. Default is set to off. 
    • Overlay Color -  Set the color of the overlay on the image. There are two ways to set the Overlay Color: Click the Color Swatch to select a color or enter the hex code in the text field. 
    • Overlay Opacity (%) - Set the percentage for the Overlay Opacity. 0% is completely transparent. 
    • Headline Text Color - Set the color of the Headline text. There are two ways to set the Headline Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 
    • Headline Text - Enter the text that should appear in the headline. 
    • Headline Alignment - Set the alignment of the headline, choose between left, right, or center.
    • Body Copy Color - Set the color of the Body text. There are two ways to set the Body Copy Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 
    • Body Copy - Enter the text as it should appear in the app.
    • Body Copy Alignment - Set the alignment for the body copy, either left, right or center. 

Swiper Carousel Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

  • Column Start - Sets the column where the Component will start. 
  • Column Span - Sets how many columns the Component will span. 
  • Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
  • Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.

Still need help? Contact Us Contact Us