description = "Features 17 Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/owl-carousel/css/owl.carousel.min.css');
    $this->addCss('assets/vendor/owl-carousel/css/owl.theme.default.min.css');
    $this->addJs('assets/vendor/owl-carousel/js/owl.carousel.min.js');
}
?>
==
<div {% if data.section_features17_id %}id="{{ data.section_features17_id }}"{% endif %} class="features17 py-24 {{ data.section_features17_bg }}">
    <div class="{{ data.section_features17_container }}">
        <!-- Row  -->
        {% if data.section_features17_header or data.section_features17_subheader %}
            <div class="row mb-10 justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="pt-5 pb-4">{{ data.section_features17_header }}</h2>
                    <h6 class="text-body line-height-normal">{{ data.section_features17_subheader }}</h6>
                </div>
            </div>
        {% endif %}
        <!-- Row  -->
        <div class="owl-carousel owl-theme features17-carousel{{ data.section_features17_id }} opacity-75">
            {% set aos1 = ['flip-left', 'flip-up', 'flip-right'] %}
            {% set aos2 = ['fade-right', 'fade-up', 'fade-left'] %}
            {% for fields in data.section_features17 %}
            <div class="item" {% if data.section_features17_animation %}data-aos="{{ aos2[ loop.index0 % 3 ] }}"{% endif %}>
                {% if fields.section_features17_link is not empty %}
                <a href="{{ fields.section_features17_clink ? fields.section_features17_clink : (fields.section_features17_plink | staticPage) }}">
                {% endif %}
                    <img class="img-fluid" src="{{ fields.section_features17_image|media|resize(180, 122, { mode: 'crop' }) }}" alt="{{ fields.section_features17_title }}" {% if data.section_features17_animation %}data-aos="{{ aos1[ loop.index0 % 3 ] }}" data-aos-duration="1200"{% endif %}/>
                {% if fields.section_features17_link is not empty %}
                </a>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% put scripts %}
<script>
// Carousel
$('.features17-carousel{{ data.section_features17_id }}').owlCarousel({
	loop: true,
	margin: 30,
	nav: false,
	dots: false,
	autoplay: {{ data.section_features17_autoplay ? 'true' : 'false' }},
	lazyLoad:true,
	responsiveClass: true,
	responsive: {
		0: {
			items: 2,
			nav: false
		},
		768: {
			items: 4
		},
		1170: {
			items: 5
		},
		1600: {
			items: 6
		}
	}
});
</script>
{% endput %}