Flexi Carousel Demo

This is a heading for the carousel

jQuery( function ( $ )
{
	// set up some vars
	let carousel = $('.flex-carousel'),
		carouselOptions = {
			contain: true,
			dragThreshold: 10,
			autoPlay: false,						// we use our own timing for autoplay so we can decide how long each slide lasts
			setGallerySize: false,
			wrapAround: true,
			selectedAttraction: 0.01,
			pageDots: false,
			prevNextButtons: false
			
		},
		sTimeout = null,
		videoEndBuffer = 2500,						// video slides will change before the end so there's no sudden stop / or loop - milliseconds 
		mqm = matchMedia('(min-width: 992px)'),		// not used currently but would be for different behaviour depending on screen size
		cDots = $('.flex-carousel__dots'),			// the dots container
		cDot = cDots.find('i')						// the actual dots


	// add class when flickity has loaded (could be useful)
	carousel.on('ready.flickity', function()
	{
		carousel.addClass('is-active');
	});

	// event handler for whenever a slide is selected
	carousel.on( 'select.flickity', function( event, index )
	{
		clearTimeout( sTimeout );

		let slide = $('.flex-carousel__item:eq(' + index + ')'),
			type = slide.data('type'),
			duration = slide.data('duration')

		if( type == 'video' )
		{
			let video = slide.find('video').get(0),
				sDuration = video.duration * 1000

			video.currentTime = 0;
			video.play();

			sTimeout = setTimeout( function() 
			{
				carousel.flickity( 'next' );
			}, sDuration - videoEndBuffer );
		}
		else 
		{
			sDuration = duration;
			sTimeout = setTimeout( function() 
			{
				carousel.flickity( 'next' );
			}, sDuration );
		}

		cDot.filter('.is-active').removeClass('is-active');
		cDot.eq(index).addClass('is-active');
	});

	// init flickity
	carousel.flickity( carouselOptions );

	// click handler for carousel dots
	cDots.on('click', 'i', function() 
	{
		var index = $(this).index();
		carousel.flickity('select', index );
	});
});