Flexible Swiper

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.
There is also an option to display navigation badges above the cards.
Currently, this block can display either text only or video with optional text content.
- Click and drag swiping is disabled for video content on desktop.

Text content and one column layout with badges	Text content and two column layout
Video content with badges and supporting text	Video content with badges and no supporting text

Use Cases

Use Case 1

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

Use Case 2

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

Use Case 3

Use the video content option to display multiple video webinars 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

Fields

Content type

First you will need to select the type of content from two options: text 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.

Add/Edit Cards

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.

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

on modal videos- Used for aria labels, but does not display
on 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)

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

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

Page tree