description = "Slider Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/bootstrap-touch-slider/css/bootstrap-touch-slider.css');
    $this->addJs('assets/vendor/bootstrap-touch-slider/js/jquery.touchSwipe.min.js');
    $this->addJs('assets/vendor/bootstrap-touch-slider/js/bootstrap-touch-slider-min.js');
}
?>
==
<div {% if data.section_slider_id %}id="{{ data.section_slider_id }}"{% endif %} class="slider">
    <div id="slider-{{ data.section_slider_id }}" class="carousel slide bg-dark {{ data.section_slider_fade ? 'carousel-fade' }}" data-ride="carousel" data-pause="{{ data.section_slider_pause ? 'hover' : 'false' }}" data-interval="{{ data.section_slider_interval ? data.section_slider_interval : 'false' }}">
        <ol class="carousel-indicators">
            {% for fields in data.section_slider %}
            <li data-target="#slider-{{ data.section_slider_id }}" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %}class="active"{% endif %}></li>
            {% endfor %}
        </ol>
        <div class="carousel-inner" role="listbox">
            {% for fields in data.section_slider %}
            <div class="carousel-item item {{ loop.first ? 'active' }} 
            {% if data.section_slider_type == 'bg' and fields.section_slider_bg == 'image' %}bg-cover{% endif %}  
            {% if data.section_slider_type != 'img' %}{{ data.section_slider_height }}{% endif %} 
            {% if data.section_slider_type == 'bg' and fields.section_slider_bg == 'color' %}{{ fields.section_slider_color }}{% endif %}"
            {% if data.section_slider_type == 'bg' and fields.section_slider_bg == 'image' %}
            style="background-image: url('{{ fields.section_slider_image|media|resize(1920, 1080, { mode: 'crop' }) }}');"
            {% endif %}
            >
            {% if data.section_slider_type == 'bg' and fields.section_slider_bg == 'video' %}
            <video class="vid-cover w-100 {{ data.section_slider_height }}" autoplay loop muted poster="{{ fields.section_slider_image|media|resize(1920, 1080, { mode: 'crop' }) }}">
                <source src="{{ fields.section_slider_video|media }}" type="video/mp4" />
                <img id="alternative" src="{{ fields.section_slider_image|media|resize(1920, 1080, { mode: 'crop' }) }}" />
            </video>
            {% endif %}

                {% if data.section_slider_type == 'img' %}
                <img data-animation="animated {{ fields.section_slider_image_anim }} {{ fields.section_slider_image_delay }} {{ fields.section_slider_image_durat }}" src="
                {% if data.section_slider_height == 'h-lg-60vh' %}
                {{ fields.section_slider_image|media|resize(1920, 600, { mode: 'crop' }) }}
                {% elseif data.section_slider_height == 'h-lg-70vh h-60vh' %}
                {{ fields.section_slider_image|media|resize(1920, 700, { mode: 'crop' }) }}
                {% elseif data.section_slider_height == 'h-lg-80vh h-60vh' %}
                {{ fields.section_slider_image|media|resize(1920, 800, { mode: 'crop' }) }}
                {% elseif data.section_slider_height == 'h-lg-90vh h-md-80vh h-60vh' %}
                {{ fields.section_slider_image|media|resize(1920, 900, { mode: 'crop' }) }}
                {% elseif data.section_slider_height == 'h-lg-100vh h-md-80vh h-60vh' %}
                {{ fields.section_slider_image|media|resize(1920, 1080, { mode: 'crop' }) }}
                {% endif %}
                " class="d-block" alt="">
                {% endif %}
                <div class="position-absolute pos-0 overflow-hidden w-100 h-100 {{ fields.section_slider_opacity }} {{ fields.section_slider_overlay }}"></div>
                <div class="h-100 w-100 pos-0 position-absolute">
                    <div class="{{ data.section_slider_container }} h-100">
                        <div class="row h-100 justify-content-center align-items-center">
                        
                            {% for caption in fields.section_slider_caption %}
                            {% set size_1 = fields.section_slider_caption_size %}
                            {% set size_2 = 12 - size_1 %}
                            <div class=" 
                            {% if loop.index0 == 0 %}col-lg-{{ size_1 }} {{ fields.section_slider_caption_position }}{% else %}col-lg-{{ size_2 }} pl-7{% endif %} 
                            {% if caption.section_slider_caption_type == 'content' %}{{ fields.section_slider_caption_align }}{% else %}d-none d-lg-block{% endif %}
                            ">

                                {% if caption.section_slider_caption_type == 'content' %}
                                {% for content in caption.section_slider_caption_content %}
                                
                                {% set animation = content.section_slider_caption_content_anim %}
                                {% set delay = content.section_slider_caption_content_delay %}
                                {% set duration = content.section_slider_caption_content_durat %}
                                
                                {% if content.section_slider_caption_content_type == 'header' %}
                                <h1 data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="line-height-em pb-5 mb-0 {{ content.section_slider_caption_content_weight }} {{ content.section_slider_caption_content_size }} {{ content.section_slider_caption_content_color }}">
                                    {{ content.section_slider_caption_content_text }}
                                </h1>
                                {% endif %}
                                
                                {% if content.section_slider_caption_content_type == 'subheader' %}
                                <h3 data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="line-height-em pb-5 mb-0 {{ content.section_slider_caption_content_weight }} {{ content.section_slider_caption_content_size }} {{ content.section_slider_caption_content_color }}">
                                    {{ content.section_slider_caption_content_text }}
                                </h3>
                                {% endif %}
                                
                                {% if content.section_slider_caption_content_type == 'desc' %}
                                <p data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="mb-5 {{ content.section_slider_caption_content_weight }} {{ content.section_slider_caption_content_size }} {{ content.section_slider_caption_content_color }}">
                                    {{ content.section_slider_caption_content_text }}
                                </p>
                                {% endif %}
                                
                                {% if content.section_slider_caption_content_type == 'list' %}
                                <div data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="py-1 {{ content.section_slider_caption_content_size }} {{ content.section_slider_caption_content_color }}">
                                    <i class="{{ content.section_slider_caption_content_icon }} text-center line-height-tight d-inline-block w-10r h-6r mr-2"></i>
                                    {{ content.section_slider_caption_content_text }}
                                </div>
                                {% endif %}
                                
                                {% if content.section_slider_caption_content_type == 'btn' %}
                                <a data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="btn btn-rounded btn-chevron {{ not loop.last ? 'mr-5' }} mb-2 {{ content.section_slider_caption_btn_size }} {{ content.section_slider_caption_btn_color }}" href="{{ content.section_slider_caption_content_btn_clink ? content.section_slider_caption_content_btn_clink : (content.section_slider_caption_content_btn_plink | staticPage) }}">
                                    <span>{{ content.section_slider_caption_content_text }}<i class="fa fa-chevron-right"></i></span>
                                </a>
                                {% endif %}
                                
                                {% endfor %}
                                {% endif %}
                                
                                {% if caption.section_slider_caption_type == 'image' %}
                                
                                {% set animation = caption.section_slider_caption_media_anim %}
                                {% set delay = caption.section_slider_caption_media_delay %}
                                {% set duration = caption.section_slider_caption_media_durat %}
                                
                                    <img data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="w-100 img-fluid rounded" src="{{ caption.section_slider_caption_image|media|resize(550, 350, { mode: 'crop' }) }}" />
                                {% endif %}
                                
                                {% if caption.section_slider_caption_type == 'video' %}
                                <div data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="d-none d-lg-block embed-responsive embed-responsive-16by9">
                                    <video class="embed-responsive-item" controls="">
                                        <source src="{{ caption.section_slider_caption_video|media }}" type="video/mp4" />
                                        Your browser does not support HTML5 video.
                                    </video>
                                </div>
                                {% endif %}
                                
                                {% if caption.section_slider_caption_type == 'youtube' %}
                                <div data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="d-none d-lg-block embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ caption.section_slider_caption_svideo }}" frameborder="0" allowfullscreen></iframe>
                                </div>
                                {% endif %}
                                
                                {% if caption.section_slider_caption_type == 'vimeo' %}
                                <div data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item" src="//player.vimeo.com/video/{{ caption.section_slider_caption_svideo }}"></iframe>
                                </div>
                                {% endif %}
   
                            </div>
                            {% endfor %}
                            
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="carousel-controls opacity-0 transition-40">
            <a class="carousel-control-prev w-auto pl-4" href="#slider-{{ data.section_slider_id }}" role="button" data-slide="prev">
                <span class="fa fa-angle-left icon-prev d-flex justify-content-center align-items-center rounded-circle w-12r h-12r border-1 border-white-75" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next w-auto pr-4" href="#slider-{{ data.section_slider_id }}" role="button" data-slide="next">
                <span class="fa fa-angle-right icon-next d-flex justify-content-center align-items-center rounded-circle w-12r h-12r border-1 border-white-75" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- End Slider -->
</div>

{% put scripts %}
<script>
$('#slider-{{ data.section_slider_id }}').bsTouchSlider();
</script>
{% endput %}