Advanced Banner - Simple | Presence Resources

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>

Advanced Banner - Simple

HTML Structure

Default Styling

Custom Styling Example

Aliquam at pharetra

Lorem ipsum dolor sit

Proin convallis accumsan

Custom Styling Example

Aliquam at pharetra

Lorem ipsum dolor sit

Proin convallis accumsan