description = "Testimonials 3 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_testimonials3_id %}id="{{ data.section_testimonials3_id }}"{% endif %} class="testimonials3 py-24 {{ data.section_testimonials3_bg }}">
    <div class="{{ data.section_testimonials3_container }}">
        <!-- Row  -->
        {% if data.section_testimonials3_header or data.section_testimonials3_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_testimonials3_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_testimonials3_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="testimonials3-carousel-{{ data.section_testimonials3_id }} owl-carousel owl-theme">
            {% for fields in data.section_testimonials3 %}
            <div class="item p-8 my-4">
                <div class="row justify-content-center">
                    <div class="{{ data.section_pricing3_size }} text-center" {% if data.section_testimonials3_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                        <i class="fa fa-quote-left text-default font-italic display-8 mb-4"></i>
                        <p class="font-italic mb-8">{{ fields.section_testimonials3_desc }}</p>
                        <img src="{{ fields.section_testimonials3_image|media|resize(100, 100, { mode: 'crop' }) }}" alt="{{ fields.section_testimonials3_sutitle }}" class="rounded-circle img-fluid d-inline-block w-auto mb-4" />
                        <h3 class="font-weight-medium">{{ fields.section_testimonials3_title }}</h3>
                        <h6 class="mb-5 text-body line-height-normal">{{ fields.section_testimonials3_subtitle }}</h6>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% put scripts %}
<script>
//Carousel
$('.testimonials3-carousel-{{ data.section_testimonials3_id }}').owlCarousel({
    loop: true,
    margin: 40,
    nav: false,
    dots: true,
    autoplay:true,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1
            , nav: false
        }
        , 1170: {
            items: 1
        }
    }
});
</script>
{% endput %}