Advanced Banner 2017

This slideshow features an autoplay function with pause on hover, 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 ab2017" data-initialize="false">
	<div class="cycle-slideshow" data-cycle-slides="> figure" data-cycle-speed="800" data-cycle-timeout="4000" data-cycle-pause-on-hover="true" 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 -->
					
		   <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>

Advanced Banner 2017

HTML Structure

Default Styling

Aliquam at pharetra

Lorem ipsum dolor

Aliquam at pharetra

Custom Styling Example

Aliquam at pharetra

Lorem ipsum dolor

Aliquam at pharetra

Custom Styling Example

Aliquam at pharetra

Lorem ipsum dolor

Aliquam at pharetra