Say Hello: Carousel using Flickity, Timber and Twig, with custom cross-fade effect

_flickity.scss

.flickity {
	&--fade {
		.flickity-slider {
			transform: none !important;
		}

		.flickity-cell {
			@include transition(all, slower);
			left: 0 !important;
			opacity: 0;
			z-index: -1;
		}

		.flickity-cell.is-selected {
			opacity: 1;
			z-index: 0
		}
	}
}

carousel-extend.php

<?php

use SayHello\Theme\Vendor\LazyImage;

foreach ($context['post']->carousel['images'] as &$image) {
	$image_object = new LazyImage($image, 'carousel_full');
	$image['lazyimage'] = $image_object->get_image(true);
}

carousel-fade.twig

{% if post.carousel.images is not empty %}
	<div class="c-carousel">
		<div class="c-carousel__entries flickity--fade" data-carousel="fade">
			{% for slide in post.carousel.images %}
				<div class="c-carousel__entry flickity-cell">
					{{ slide.lazyimage }}
				</div>
			{% endfor %}
		</div>
	</div>
{% endif %}

flickitySlider.js

(function($) {
	$('[data-carousel="fade"]').flickity({
		autoPlay: 5000,
		cellSelector: '.flickity-cell',
		draggable: false,
		pageDots: false,
		prevNextButtons: false
	});
})(jQuery);