description = "Testimonials 2 Sections"

[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');
}
?>
==
{% set size_1 = data.section_testimonials2_size %}
{% set size_2 = 12 - size_1 %}
<div {% if data.section_testimonials2_id %}id="{{ data.section_testimonials2_id }}"{% endif %} class="testimonials2 py-24 {{ data.section_testimonials2_bg }}">
    <div class="{{ data.section_testimonials2_container }}">
        <!-- Row  -->
        {% if data.section_testimonials2_header or data.section_testimonials2_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_testimonials2_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_testimonials2_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="testimonials2-carousel-{{ data.section_testimonials2_id }} owl-carousel owl-theme">
            {% set aos = ['fade-right', 'fade-left', 'fade-up'] %}
            {% for fields in data.section_testimonials2 %}
            <div class="item p-8 my-4" {% if data.section_testimonials2_animation %}data-aos="{{ aos[ loop.index0 % 3 ] }}" data-aos-duration="1200"{% endif %}>
                <div class="row sm-text-center">
                    <div class="col-lg-{{ size_1 }} col-md-12 {{ data.section_testimonials2_align }} display-13-center my-4 my-lg-0 {{ data.section_testimonials2_position }}">
                        <img src="{{ fields.section_testimonials2_image|media|resize(200, 200, { mode: 'crop' }) }}" alt="{{ fields.section_testimonials2_sutitle }}" class="rounded-circle img-fluid d-inline-block w-auto" />
                    </div>
                    <div class="col-lg-{{ size_2 }} col-md-12 {{ data.section_testimonials2_align }} display-13-center {% if data.section_testimonials2_position == 'order-1' %}order-2{% else %}order-1{% endif %}">
                        <h3 class="font-weight-medium">{{ fields.section_testimonials2_title }}</h3>
                        <h6 class="mb-5 text-body line-height-normal">{{ fields.section_testimonials2_subtitle }}</h6>
                        <p class="font-italic">{{ fields.section_testimonials2_desc }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% set col_xl = data.section_testimonials2_column %}
{% if col_xl == 1 %}{% set col_l = 1 %}{% set col_m = 1 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 2 %}{% set col_l = 2 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 3 %}{% set col_l = 3 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 4 %}{% set col_l = 3 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}
{% if col_xl == 6 %}{% set col_l = 4 %}{% set col_m = 2 %}{% set col_s = 1 %}{% endif %}

{% put scripts %}
<script>
//Carousel
$('.testimonials2-carousel-{{ data.section_testimonials2_id }}').owlCarousel({
    loop: true,
    margin: 40,
    nav: false,
    dots: true,
    autoplay:true,
    responsiveClass: true,
    responsive: {
		0: {
			items: {{ col_s }}
		},
		768: {
			items: {{ col_m }}
		},
		1170: {
			items: {{ col_l }}
		},
		1800: {
			items: {{ col_xl }}
		}
    }
});
</script>
{% endput %}