Accessibility Tool

Advanced Banner - Simple

This slideshow features static slides controlled by previous/next buttons and a caption area. It does not auto-rotate. Any text, image, or link elements may be included within the caption; however, it is against best practices to include any container elements such as "div".

For a complete list of best practices, visit the main portlet page: Advanced Banner

HTML Structure


<div class="slider simple" data-initialize="false">
    <div class="cycle-slideshow" data-cycle-slides="> figure" data-cycle-speed="800"  data-cycle-timeout="0">
        <figure>
            <img src="theme/slides/slide1.jpg" alt="" />
            <figcaption class="captionHTML">
              <!-- Open to any text format (avoid container elements) -->
            </figcaption> 
        </figure> 
        <!-- Copy/paste figure and its contents to create more slides. -->
        <a href="#" class="cycle-prev fa fa-chevron-left">
            <span>Previous</span>
        </a>
        <a href="#" class="cycle-next fa fa-chevron-right">
            <span>Next</span>
        </a> 
    </div>
    <!-- end cycle-slideshow -->
</div>
<!-- end slider -->
<!-- The following are part of the render template therefore cannot be altered. Include these files in the <head> OR at the bottom just before </body>) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js">//</script>

Default Styling

slide1
Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae. Cras sit amet placerat neque.
slide2
Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae. Cras sit amet placerat neque.
slide3
Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae. Cras sit amet placerat neque.
PreviousNext

Custom Styling Example

Nurse and Patient High-Fiving

Aliquam at pharetra

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae.

Proin convallis
Grandmother, mother and child smiling while cooking

Lorem ipsum dolor sit

Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae. Cras sit amet placerat neque.

Cras sit
Boy Smiling on Swing

Proin convallis accumsan

Cras sit amet placerat neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis accumsan arcu.

Sit amet
PreviousNext

Custom Styling Example

Nurse and patient high-fiving

Aliquam at pharetra

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae.

Proin convallis
Grandmother, mother and child smiling while cooking

Lorem ipsum dolor sit

Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae. Cras sit amet placerat neque.

Cras sit
Boy smiling on a swing

Proin convallis accumsan

Cras sit amet placerat neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis accumsan arcu.

Sit amet
PreviousNext

2020 © All Rights Reserved | Website Design By: Intrado | Login