CSS Here is the code I used. Adjust the links to images and scripts and (obvious) link to the framework and plugin CSS in the head section of the page.
<body>
<div class="row">
<div class="small-10 small-centered columns">
<div class="carrossel">
<div><img src="img1.jpg" alt="dinossauro1"></div>
<div><img src="img2.jpg" alt="dinossauro2"></div>
<div><img src="img3.jpg" alt="dinossauro3"></div>
<div><img src="img4.jpg" alt="dinossauro4"></div>
</div>
</div>
</div> <!-- /.row -->
<script src="../js/vendor/jquery.js"></script>
<script src="../js/vendor/fastclick.js"></script>
<script src="../js/foundation.min.js"></script>
<script>$(document).foundation();</script>
<script type="text/javascript" src="slick-master/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carrossel').slick({dots: true, autoplay: true, fade:true});
});
</script>
</body>
</html>