{% do craft.app.view.registerCssFile('@web/js/lib/slick/slick.css') %}
{% do craft.app.view.registerCssFile('@web/js/lib/slick/slick-theme.css') %}
{% do craft.app.view.registerJsFile('@web/js/lib/slick/slick.min.js') %}
<style>
.imageGallery img{
max-height:300px;
}
</style>
<div class="mt-5 mb-5">
<div class="imageGallery">
{% for entry in block %}
    <div><img src="{{entry.url('transformheightreduce')}}"></div>
{% endfor %}
</div>
</div>


  
  
  <script type="text/javascript">
    $(document).ready(function(){
	console.log("ready");
		$('.imageGallery').slick({
		  dots: false,
		  infinite: true,
		  centerMode: true,
			autoplay: true,
			autoplaySpeed: 0,
			speed: 4000, 
			autoplay: true, 
			autoplaySpeed: 0, 
			cssEase: 'linear', 
			slidesToShow: 1, 
			slidesToScroll: 1, 
			variableWidth: true,
			
		});
    });
  </script>