Advanced Banner

The advanced banner offers several customization options for slider controls and caption text. This area is left open to any HTML input desired. For best practices, only text, links, and sometimes images should be included. Avoid using container elements such as "div" in the caption.

Best Practices

Paginated controls and/or previous and next arrows are REQUIRED.
All autoplaying media MUST have a way to pause. A visible pause button (Advanced Banner 2017 - Full Controls) is best for user experience.
Slide captions must conform to ADA AA contrast guidelines (Web AIM Contrast Checker). For transparent or gradient backgrounds, text must pass contrast specifications against the lightest/darkest color that may appear in the background.
Slide text styling should display properly at all device widths (320-1920px) and should be able to accomodate more or less verbiage.
Links must display an obvious change (other than color) on hover/focus.
Slider images should have large enough dimensions to scale up to HD resolution. Avoid overlaying text on panoramic images as this can be problematic on smaller desktop resolutions.
Image file sizes should be as close to 100KB as possible without large amounts of quality loss (High control image compresion).

Render Templates

The HTML structure of a portlet is determined by the render template in use. Portlets have multiple render templates to choose from, and our development team has the ability to create new render templates based on client need.

Advanced Banner - Simple

This slideshow features static slides controlled by previous/next buttons and a caption area.

Advanced Banner 2017 - Full Controls

This slideshow features an autoplay function, a pause/play button that appears on focus, paginated slide controls, previous/next buttons, and a caption area.

Advanced Banner 2017

This slideshow features an autoplay function with pause on hover, paginated slide controls, previous/next buttons, and a caption area.

Side-by-side Comparisons

div class="slider simple"

div class="cycle-slideshow"

figure

img

figcaption

This area is open to any HTML text, image, and link elements. It is against best practices to include container elements such as “div”.

a class="cycle-prev"

span

a class="cycle-next"

span

div class="slider ab2017"

div class="cycle-slideshow"

figure

img

figcaption

This area is open to any HTML text, image, and link elements. It is against best practices to include container elements such as “div”.

a class="cycle-prev"

span

a class="cycle-next"

span

ol class="selector"

span

div class="slider controls"

div class="cycle-slideshow"

figure

img

figcaption

This area is open to any HTML text, image, and link elements. It is against best practices to include container elements such as “div”.

div id="pause-play" class="pause"

a class="fa fa-pause"

Pause

a class="fa fa-play"

Play

a class="cycle-prev"

span

a class="cycle-next"

span

ol class="selector"

span