<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>
</ul>
</div>
<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>