Cycle Slideshow Technical Guide

Overview

This is a plugin that creates a rotating slideshow of images that you would want to showcase.   There are several options for you to customize including the transition effect, slide duration, and captions.

Notes & Recommendations

The slideshow size will be determined by the first image that you set. If additional images are not the same size they will be automatically resized to fit. To avoid stretching, we recommend that all images are the same size or that the smallest image be the first in the gallery. 

Technical Requirements

  • Require.js (preloaded on UM Template)

Slide Information

For each slide you wish to display, you will need to provide the following. The Advanced Options section will help you determine the visual appearance of the plugin.

Slide Image: Upload an either a .JPG or .PNG image to use as the main visual component of this slide. 

Image Alt:  Enter short but descriptive text about the image you've selected. This text will also be used as the Slide Title if you select the setting under Advanced Options.  Note that any text that appears in the slide image must be entered here for accessibility compliance.

Caption Text: Caption text is optional and will only be displayed if you select the setting under Advanced Options.

Advanced Options

Transition Effect: This option controls the effect from one slide to the next.

  • Horizontal Scrolling: Images will scroll from right to left horizontally for image transition.
  • Fade: Fades to white before transitioning to next image.
  • Fadeout: Fades to black before transitioning to next image.
  • None: No transitional effects

Display Captions: By default the Caption Text supplied for each slide will be displayed as an overlay towards the bottom of the slide, but you can disable captions if you choose.

Caption Vertical Alignment: You can choose position of the overlay caption box with this setting.  By default this is set to "Padded Bottom" which keeps the box 25 pixels from the bottom of your image.  Other available settings are "Absolute Bottom", "Padded Top", and "Absolute Top".

Display Title:  By default the Image Alt supplied for each slide will be displayed as an overlay towards the bottom of the slide, but you can disable titles if you choose.

Pause on Hover: As a default behavior, the slideshow will pause while hovering over image.  Selecting "False" here will disable that feature.

Transition Speed: This setting controls how quickly the transition between slides happens.  This listing is in milliseconds (1000 milliseconds per 1 second) but we may change this in the future.

Slide Duration: This setting controls how long each slide will display on screen before progressing to the next slide. This listing is in milliseconds (1000 milliseconds per 1 second) but we may change this in the future.  By default this is set to 6000 or 6 seconds per slide.

Alignment: You can choose to align your slideshow to the left or right of the page here.

Custom Arrows: If you would like to replace the pre-styled arrow to advance to the next or previous slide, you can do so here.  We recommend arrow images be approximately 40px by 40px and be .PNGs with transparent backgrounds.  Simply upload and select those images using this setting.