Slideshow Component

What is it? 

An image slider displays a series of images one at a time, allowing users to navigate through them using arrows or swipe gestures. It uses manual transitions to move from one image to the next.

Elements 

  • Heading title: Enter a heading for the slideshow and any introductory text. The "Content" field provides useful context for viewers.
  • Image: Shows one image at a time. You can add as many images as you like, but as a best practice, keep it focused. Most users won't click through more than a dozen items.
  • Navigation: Users can navigate via arrows or swiping. Also shows how many slides there are and your position.
  • Description: Optional text for each slide. Supports links, bold and italic formatting. Truncates after 350 characters.

How do you use it? 

  • Canvas edit mode: When toggled on, this mode stacks all slides vertically in the editor for easy access and editing. Navigation buttons are hidden to prevent obstruction. The live page view remains unchanged—slides still rotate horizontally as expected.
  • Prioritize order: Place the most important message in the first slide, as users often do not click through all of them.
  • Use high-quality imagery: Ensure photos are high-resolution, professional and properly cropped (landscapes work best).
  • Keep text brief: Keep text, such as headings and descriptions, short and easy to read. 

When should I use it?  

  • Often used when space is limited or when images are related in sequence.
  • When you have several images but don’t want a long, cluttered layout.
  • Use for event highlights or recaps, campus walkthroughs and tours and testimonial images or headshots.

Benefits 

  • Space optimization: Rotates content to avoid long, cluttered pages.
  • Increased engagement: Interactive navigation keeps users exploring
  • Improved UX: Lets users digest information at their own pace. 
A colorful tree on the quad in early spring.

Slide Title One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Old Building on Campus

Slide Title Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

A puppy lays on a sofa with a stuffed Otto Toy

Slide Title Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Three students smiling at graduation in the JMA Wireless Dome

Slide Title Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Note: To edit the slideshow, first select the slideshow container by clicking on its left or right edge. Then toggle "Canvas Edit Mode" on or off. Alternatively, select the slideshow container from the layer view.