Accessibility Tool

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>

Default Styling

slide1

Aliquam at pharetra

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

Sit amet dolor
slide2

Lorem ipsum dolor

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

Consectetur adipiscing
slide3

Aliquam at pharetra

Cras sit amet placerat neque. Lorem ipsum dolor sit amet. Proin convallis quis vehicula dolor sagittis vitae.

Placerat neque
PreviousNext

    Custom Styling Example

    slide1

    Aliquam at pharetra

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

    Sit amet dolor
    slide2

    Lorem ipsum dolor

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

    Consectetur adipiscing
    slide3

    Aliquam at pharetra

    Cras sit amet placerat neque. Lorem ipsum dolor sit amet. Proin convallis quis vehicula dolor sagittis vitae.

    Placerat neque
    PreviousNext

      Custom Styling Example

      slide1

      Aliquam at pharetra

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

      Sit amet dolor
      slide2

      Lorem ipsum dolor

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

      Consectetur adipiscing
      slide3

      Aliquam at pharetra

      Cras sit amet placerat neque. Lorem ipsum dolor sit amet. Proin convallis quis vehicula dolor sagittis vitae.

      Placerat neque
      PreviousNext

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