Flexible Swiper

Also known as: video swiper, card swiper, social videos

A multi-purpose block that displays multiple cards/panels in a swiper. Can showcase videos, text, and/or images.

Examples 

Documentation updates in progress

Use When

• Start bullets with gerunds for consistency; the bullet should complete the phrase starting with "Use when..." 
  • Example: "Displaying a small amount of copy with a photo"
• (optional) Include a “Do Not Use When” subhead when needed

Editorial Guidelines

• Character limits for each feature with copy
• Notes about copy fields that should or should not be used together
• Tips for writing these guidelines
• Use bulleted lists
• Use affirmative language
• Limit to two sentences or less
• Edit and use fewer words!

Design

Images

Photo A (required/optional)

• Dimensions:
• Other details to note (e.g. keep faces vertically centered)

Photo B (required/optional)

• Dimensions:
• Other details

Variations

• Show additional variations of the block that are not in Examples above (more screenshots showing additional features) 
• Should be an orderly progression, not an attempt to show every possible combination

Implementation

ACF Fields

Other technical details we include in existing docs

Resources

• Figma mockup (link)

Design

• A flexible block that displays multiple cards/panels in a swiper.
• The block displays swiper arrows and creates swiping functionality when the content requires them. (move to implementation)
• There is also an option to display navigation badges above the cards.
• Currently, this block can display text with an optional image or a video with optional text.
  • Click and drag swiping is disabled for video content on desktop. (move to implementation

Use Cases

Use Case 1

Use the text/image content option to display multiple html tables in a swiper. Example: https://business.wisc.edu/undergraduate/careers/#data

Use Case 2

Use the text/image content option to display multiple cards (with or without images) in a single row with the swiper. Example: https://business.wisc.edu/undergraduate/careers/#resources

• Add a grid of logos inside the cards, too - example: https://business.wisc.edu/undergraduate/recruit-hire#partnership 

Use Case 3

Use the video content option to display multiple videos in a swiper, with or without supporting copy for each video.

Use Case 4

Use the video content + mobile video option to display multiple youtube shorts. Example: https://business.wisc.edu/undergraduate/careers#badger-experience

Fields

Content type

• First you will need to select the type of content from two options: text/image or video 
• This block has many conditional fields that depend on the content type chosen

Display badges?

• Yes or no
• Only works with a 1 column layout with more than one card

Mobile layout for badges

• • Dropdown (default) or stacked
  • Only choose stacked when you have 7 or fewer cards and the stacked badges look good on mobile

Mobile video?

• Only appears with Video content type selected
• Crops videos to 9:16

Lazy load?

• Doesn't currently work with landscape videos!
• Only appears with Video content type selected
• Sets video to a lazy load instead of a modal view.

Show Overflow

• Video columns expand the width of the page, with parts of the left and right cards will be partially off the page
• Randomize Order? - only available when Show Overflow is toggled to yes. 
  • When checked, the order of the videos will be randomized.
• Adaptive autoheight is not necessary as the override images should always be the same size.

Add/Edit Cards

- Card details - (accordion)

Card image

• Image field
• Select the photo or icon you would like to display
• Be sure to choose an appropriate image aspect ratio under the block configuration tab.

Title (required)

• Text field
• Text that displays inside badges (if shown) and title for the card
• For badges layout: this content will go inside the badge, so keep this as short as possible; recommend no more than 30 characters.
• For show overflow: the title is toward the bottom of the card

Hide title in card?

• • Yes or no
  • This field is only visible if Display badges? is checked
  • Allows the title field to show in the badge only, so you can have a different title or no title in the card.

Content

• WYSIWYG
• Add text and/or HTML code for content displayed in the card

CTA Link

• Card button URL and text

CTA Style

• Select the type of button you want in the card

- Video Details - (accordion)

Youtube Embed Code

• Tooltip: “Insert embed code from YouTube. For example: CqZeezv9xqw.”
• Text field

Video length

• Text field
• Displays in the lower right corner of the video thumbnail/placeholder image. Disappears when video is played

Video title

• For modal videos - Used for aria labels, but does not display on the page
• For lazyload videos - displays on video

Image Override

• Tooltip: Image will override YouTube thumbnail. Make sure video image dimensions are the same for all testimonials in the block. Youtube thumbnails are 1176x662px
  • TIP: Recommend using an image with 4:3 aspect ratio if there is a lot of text content next to the video. Dimensions of 1024px by 768px have worked well before.
• Image (Array)
• If Show Overflow is toggled yes, make sure all the images are the same size.
  • The images can be vertical or horizontal

Image Alt text

• Tooltip: Describe what’s in the youtube thumbnail image. Not necessary if you use the Image Override.
• Text field

Play Button Color

• Tooltip: Red Button is only used for low contrast, grayscale images where light and dark buttons won't work.
• Select: dark, light, or red
• Play buttons won't work when Show Overflow is toggled to yes
  • The play button says "Watch the video" with an arrow

Play Button Alt Text

• • Tooltip: Aria-label for the play button. Defaults to “play video”. Examples include: “Watch Sennai’s video”
  • Text field

Introduction

• Includes standard block intro fields
  • Section Title
  • Section paragraph

Footer

• Includes standard block footer fields
  • Footer content
  • Footer CTAs

Configuration

Columns

• Select the number of columns to display for XL screens. Other column breakpoints are set for you.

  • Default = 1 column
  • Options: 1, 2, 3, 4
• This field is only shown if content type == text

Enable card shadows?

• Yes or no
• Default is Yes

Adaptive autoheight?

• Yes or no
• Default is Yes
• Toggle to no if Show Overflow is toggled yes

Card image ratio

• If adding an image to any cards, select an appropriate aspect ratio 
• Default - 16x9
• Options:
  • icon
  • 16x9 
  • 21x9
  • 4x3
  • 1x1

Center icons?

• Yes or No
• When image ratio is set to "icon", this field will appear
• Default - No (icon will be left aligned)
• If Yes, icon will be centered and a small gray horizontal rule will appear between the icon and the other card content

Anchor ID

Block Wrapper Classes