Cacher is the code snippet organizer for pro developers

	jQ171(document).ready(function($) {
		$('.featured-event-wrapper ul').owlCarousel({
			items: 3,
			autoPlay: true,
			stopOnHover: true,
			navigation: false,
			pagination: true,
			goToFirstSpeed: 1000,
			margin: 20,
			autoHeight: true,
			touchDrag: true,
			itemsTablet: [991, 2],
			itemsMobile: [500, 1]
		});
	});

{% assign sorted = List.Items | OrderBy: 'FieldValues.DisplayOrder', 'asc' %}

<div class="featured-event-wrapper">
	<ul class="owl-carousel owl-theme">
	{% for Item in sorted %}
	    {% assign nowFormatted = 'now' | DateFormat:"uuuu'-'MM'-'dd'T'HH':'mm':'ss", Item.FieldValues.Timezone %}
	    {% assign startFormatted = Item.FieldValues.DisplayStartDate | DateFormat:"uuuu'-'MM'-'dd'T'HH':'mm':'ss", Item.FieldValues.Timezone %}
	    {% assign endFormatted = Item.FieldValues.DisplayEndDate | DateFormat:"uuuu'-'MM'-'dd'T'HH':'mm':'ss", Item.FieldValues.Timezone %}
	    {% if startFormatted < nowFormatted and endFormatted > nowFormatted %}
		<li class="featured-event-item">
			<a href="{{ Item.FieldValues.EventLink }}" class="featured-event-link">
				{% if Item.FieldValues.EventImage != "" %}
                    <img src="{{ Item.FieldValues.EventImage }}" class="featured-event-image" alt="" />
                {% else %}
                    <img src="https://www.speakcdn.com/sitefiles/global/images/svg/placeholder.svg" class="featured-event-image-placeholder" alt="" />
                {% endif %}
			</a>
			<div class="featured-event-DateTime">
    			<p class="featured-event-date">			                
                    {{ Item.FieldValues.EventDate }}
                    
                </p>
                <p class="featured-event-time">
                    <span>{{ Item.FieldValues.EventTime }}</span> 
                    
                </p>
            </div>
            <p class="featured-event-name">
                <a href='{{ Item.FieldValues.EventLink }}'>
                    {{ Item.FieldValues.EventTitle }}
                </a>
            </p>
            <span class="featured-event-description">{{ Item.FieldValues.EventDescription | StripHtml | Truncate: 150 }}</span>
        </li>
         {% endif %}
        {% endfor %}
    </ul>
</div>