Accessibility Tool


This render template creates a carousel of callouts. It uses a jQuery plugin to display four at a time with additional callouts hidden offscreen until the forward/next arrows are used to trigger a change. Each callout has one link that wraps separate spans for image and text.

For a complete list of best practices, visit the main portlet page: Callouts

HTML Structure

<div class="calloutContainer calloutCarousel">
    <ul class="buttons carousel clearfix">
   	<li class="calloutItem">
         <a href="">
			<span class="image">
               <img src="theme/callouts/callout1.jpg" alt="" />
           <span class="text">
                Callout Text
       </li> <!-- end CalloutItem -->
	<!-- Copy/paste li.calloutItem and contents for more callouts of the same type -->

<!-- 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>) -->
<link rel="stylesheet" type="text/css" href="//"/> 
<script type="text/javascript" src="//"></script> 
    $('.calloutCarousel .carousel').slick({
		cssEase: 'linear',
		infinite: true,
       slidesToShow: 4,
       slidesToScroll: 1,
		speed: 500,
		dots: false,
		arrows: true,
		appendArrows: $("<div></div>").addClass("controls").insertAfter(".calloutCarousel .carousel"),
		accessibility: true,
		responsive: [
			  breakpoint: 1024,
			  settings: {
			  slidesToShow: 3,
			  slidesToScroll: 3,
			  breakpoint: 600,
			  settings: {
			  slidesToShow: 2,
			  slidesToScroll: 2

Default Styling

Custom Styling Example

Custom Styling Example

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