Accessibility Tool

Advanced Banner 2017 - Full Controls

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>

Default Styling

slide1

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

slide2

Proin convallis accumsan arcu, quis vehicula dolor sagittis vitae.

slide3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet placerat neque.

PreviousNext

    Custom Styling Example

    slide1

    Lorem ipsum

    slide2

    Proin convallis

    slide3

    Consectetur adipiscing

    PreviousNext

      Custom Styling Example

      slide1

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

      Sit amet cras
      slide2

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

      Sit amet cras
      slide3

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

      Sit amet cras
      PreviousNext

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