Carousel Multi Item - Concordia University

This is an advanced component reserved for use by the UCS Web team.

Component(s) you might want to use with this one:

Design options

The Carousel Multi Item component allows for a rotation of one to four columns on desktop. On mobile, the total number of items will stack one on top of the other.

Number of items: This is the total number of items in the Carousel Multi Items component

Items per slide: This is how many items will appear in each rotation, options are 1 to 4 items. The number of items must be divisible by the items per slide. In this example, there are 3 items per slide for a total of 6 items.

Auto play delay: The number of seconds before the slide rotates. Using "0" disables the rotation.

No gutter: Removes the gutter (white space) between items.

An empty Carousel Multi Item component in author mode

A screenshot of the Multi Items component in author mode

Guidelines

This component is used for decorative purposes, usually to share a series of images for added context and to better portray our campus environment. Keep in mind that users likely will not view every item, so this is not an ideal mechanism for sharing important information. Talk to the Web team to see if this component is the right solution for your content.

Accessibility

If the component has an image, include the Title and Alt text.
Be careful to avoid having the slides rotate too quickly. Ensure the user has enough time to absorb the content. A good way to determine this is to read the content out loud and set the time accordingly. For content that is only images, 5-6 seconds is a good rotation time.

Examples & use cases

Dos

Use the same component for each item in a slide.
Use components of the same height.
Crop images to the same aspect ratio.

Example 1: Card components used for profiles

Profile 1

Profile 2

Profile 3

Profile 4

Profile 5

Profile 6

The above is set to 3 items per slide for a total of 6 items.
Auto play delay is set to 6 seconds

Example 2: Image components

A spectacled woman reads from a sheet of paper

Students walking through the lobby of the Engineering complex

A woman standing at an information table speaking to seated man.

The above is set to 2 items per slide for a total of 4 items.
No gutter is checked.
Auto play delay is set to 6 seconds.
Each Image component is cropped to the same aspect ratio.

Example 3: Using Hero components

"Completing the one internship program allowed me to apply the knowledge I have learned in my undergrad to the real world. I was able to learn so much working hands-on in the lab and overall it was a great experience that helped determine what career path is best for me."

– Leandro Cedeno, Biochemistry

"My internship helped me develop many skills that they can’t teach you in class but are invaluable for a professional engineer, like rigorousness, autonomy and resourcefulness. It made me a lot more valuable on the professional market and was a decisive factor for receiving multiple offers and landing a great job!"

– Thierry St-Arnaud, Computer Engineering

"Thanks to the internship program I spent a whole summer working with a friendly and amazing team. They helped me overcome challenges and guided me throughout the internship. It was a marvellous professional experience!"

– Aida Baitassova, Biochemistry

When the content is text, set auto play to 0 so a user can scroll through the content at their own speed.

Don'ts

Don't use items of different heights: This will cause the page height to shift when switching to the next slide.

Don't combine different components, it will look messy.

Card title

– Aida Baitassova, Biochemistry

Button component

Don't use this component for important information, as the user might miss a rotation.

Important deadline

Deadline to submit required documentation to register with the Access Centre for Students with Disabilities and request exam accommodations for the fall 2023 final examination period.

Important information

Deadline for initial doctoral thesis submission to the Thesis Office for students who have applied for spring graduation

Don't rotate content so quickly that a user can not absorb the information

– Leandro Cedeno, Biochemistry

– Thierry St-Arnaud, Computer Engineering

– Aida Baitassova, Biochemistry

Helpful tips & "gotchas"

Test your work by pretending the content is new to you. Did you have time to take it all in? Did you feel rushed? Someone seeing it for the first time will take longer than subsequent views.

Training

There is currently no training session for the Carousel Multi Item component because it is reserved for the UCS Web team to set up as needed.

Need support?

The Web team is here to help.