Carousel

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>
           <span class="text">
                Callout Text
            </span>
         </a>
       </li> <!-- end CalloutItem -->
	<!-- Copy/paste li.calloutItem and contents for more callouts of the same type -->
     </ul>
</div>

<!-- 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="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
    
<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
			  }
			}
		]
	});  
</script>

Carousel

HTML Structure

Default Styling

Custom Styling Example

Custom Styling Example