Advanced Banner 2017 - Full Controls | Presence Resources

This slideshow features an autoplay function, a pause/play button that appears on focus, paginated slide controls, previous/next buttons, and a caption area. 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 controls" data-initialize="false">
<div class="cycle-slideshow" data-cycle-slides="> figure" data-cycle-speed="800" data-cycle-timeout="5000" data-cycle-pager="ol.selector">

    <figure>
    	  <img src="theme/slides/slide1.jpg" alt="" />
            <figcaption class="captionHTML">
              <!-- Open to any text format (avoid container elements) -->
            </figcaption> 
    </figure> <!-- end slide -->
										
	<div id="pause-play" class="pause">
	<a href="#" class="fa fa-pause" data-cycle-cmd="pause" data-cycle-context=".slider .cycle-slideshow">Pause</a>
	<a href="#" class="fa fa-play" data-cycle-cmd="resume" data-cycle-context=".slider .cycle-slideshow">Play</a>
	</div>
						
   <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> 

<ol class="selector"></ol>
</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>

<script>
	$('#pause-play a').click(function(){
		if ( $('#pause-play').hasClass('play') ) {
			$('#pause-play').removeClass('play');
			$('#pause-play').addClass('pause');
		} else {
			$('#pause-play').removeClass('pause');
			$('#pause-play').addClass('play');
		}
	});
</script>

Advanced Banner 2017 - Full Controls

HTML Structure

Default Styling

Custom Styling Example

Lorem ipsum

Proin convallis

Consectetur adipiscing

Custom Styling Example