description = "Static Slider Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addCss('assets/vendor/bootstrap-touch-slider/css/bootstrap-touch-slider.css');
    $this->addCss('assets/vendor/mb-youtubeplayer/css/jquery.mb.YTPlayer.min.css');
    $this->addCss('assets/vendor/mb-vimeoplayer/css/jquery.mb.vimeo_player.min.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');
    $this->addJs('assets/vendor/mb-youtubeplayer/js/jquery.mb.YTPlayer.min.js');
    $this->addJs('assets/vendor/mb-vimeoplayer/js/jquery.mb.vimeo_player.min.js');
    $this->addJs('assets/vendor/particles/particles.min.js');
}
?>
==
<div {% if data.section_staticslider_id %}id="{{ data.section_staticslider_id }}"{% endif %} class="staticslider overflow-hidden">
    <div id="staticslider-{{ data.section_staticslider_id }}" class="carousel slide bg-dark">
        {% if data.section_staticslider_particles is not empty %}
        <div id="particles-{{ data.section_slider_id }}" class="position-absolute w-100 h-100 {{ data.section_staticslider_particles }} pointer-events-none particles"></div>
        {% endif %}
        <div class="staticslider-inner">
            <div class="staticslider-item item {{ data.section_staticslider_height }}  
            {% if data.section_staticslider_type == 'image' %}{{ data.section_staticslider_parallax ? 'jarallax' }} bg-cover{% elseif data.section_staticslider_type == 'color' %}{{ data.section_staticslider_color }}{% endif %}"
            {% if data.section_staticslider_type == 'image' %}
            style="background-image: url('{{ data.section_staticslider_image|media|resize(1920, 1080, { mode: 'crop' }) }}');"
            {% endif %}
            >
            
                {% if data.section_staticslider_type == 'video' %}
                <video class="vid-cover w-100 {{ data.section_staticslider_parallax ? 'jarallax' }} {{ data.section_staticslider_height }}" autoplay loop muted poster="{{ data.section_staticslider_image|media|resize(1920, 1080, { mode: 'crop' }) }}" data-jarallax-video="mp4:{{ data.section_staticslider_video|media }}">
                    <source src="{{ data.section_staticslider_video|media }}" type="video/mp4" />
                    Your browser does not support HTML5 video.
                </video>
                {% endif %}
                
                {% if data.section_staticslider_type == 'youtube' %}
                <div id="bgYoutube" class="{{ data.section_staticslider_height }} bg-dark w-100 position-relative"></div>
                <div id="player-bgYoutube" class="player" 
                data-property="{videoURL:'{{ data.section_staticslider_svideo }}',containment:'#bgYoutube',stopMovieOnBlur:true,playOnlyIfVisible:true,useOnMobile:true,optimizeDisplay:true,startAt:0,showControls:false,quality:'highres',mute:true,autoPlay:true,loop:true,opacity:1,coverImage:'{{ data.section_staticslider_image|media|resize(1920, 1080, { mode: 'crop' }) }}',mobileFallbackImage:'{{ data.section_staticslider_image|media|resize(1920, 1080, { mode: 'crop' }) }}'}">
                </div>
                {% endif %}
                
                {% if data.section_staticslider_type == 'vimeo' %}
                <div id="bgVimeo" class="{{ data.section_staticslider_height }} bg-dark w-100 position-relative bg-cover" style="background-image: url('{{ data.section_staticslider_image|media|resize(1920, 1080, { mode: 'crop' }) }}');"></div>
                <div id="player-bgVimeo" class="player" 
                data-property="{videoURL:'{{ data.section_staticslider_svideo }}',containment:'#bgVimeo',stopMovieOnBlur:true,playOnlyIfVisible:true,useOnMobile:true,optimizeDisplay:true,startAt:0,showControls:false,quality:'highres',mute:true,autoPlay:true,loop:true,opacity:1,mobileFallbackImage:'{{ data.section_staticslider_image|media|resize(1920, 1080, { mode: 'crop' }) }}'}">
                </div>
                {% endif %}

                <div class="position-absolute z-10 pos-0 overflow-hidden w-100 h-100 {{ data.section_staticslider_opacity }} {{ data.section_staticslider_overlay }}"></div>
                
                {% for image in data.section_staticslider_images %}
                <img data-animation="animated {{ image.section_staticslider_images_anim }} delay-{{ image.section_staticslider_images_delay }} duration-{{ image.section_staticslider_images_durat }}" class="img-fluid rounded position-absolute d-none d-lg-block {{ image.section_staticslider_images_z ? 'z-10' }}" style="left:{{ image.section_staticslider_images_hp }}%; top:{{ image.section_staticslider_images_vp }}%;" src="{{ image.section_staticslider_images|media|resize((image.section_staticslider_images_width), false, { mode: 'auto' }) }}" />
                {% endfor %}
                
                <div class="h-100 w-100 pos-0 position-absolute">
                    <div class="{{ data.section_staticslider_container }} h-100">
                        <div class="row h-100 justify-content-center align-items-center">
                        
                            {% for fields in data.section_staticslider_caption %}
                            {% set size_1 = data.section_staticslider_caption_size %}
                            {% set size_2 = 12 - size_1 %}
                            <div class="z-10 
                            {% if loop.index0 == 0 %}col-lg-{{ size_1 }} {{ data.section_staticslider_caption_position }}{% else %}col-lg-{{ size_2 }} pl-7{% endif %} 
                            {% if fields.section_staticslider_caption_type == 'content' %}{{ data.section_staticslider_caption_align }}{% else %}d-none d-lg-block{% endif %}
                            ">
                                {% if fields.section_staticslider_caption_type == 'content' %}
                                {% for content in fields.section_staticslider_caption_content %}
                                
                                {% set animation = content.section_staticslider_caption_content_anim %}
                                {% set delay = content.section_staticslider_caption_content_delay %}
                                {% set duration = content.section_staticslider_caption_content_durat %}
                                
                                {% if content.section_staticslider_caption_content_type == 'header' %}
                                <h1 data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="line-height-em pb-5 mb-0 {{ content.section_staticslider_caption_content_weight }} {{ content.section_staticslider_caption_content_size }} {{ content.section_staticslider_caption_content_color }}">
                                    {{ content.section_staticslider_caption_content_text }}
                                </h1>
                                {% endif %}
                                
                                {% if content.section_staticslider_caption_content_type == 'subheader' %}
                                <h3 data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="line-height-em pb-5 mb-0 {{ content.section_staticslider_caption_content_weight }} {{ content.section_staticslider_caption_content_size }} {{ content.section_staticslider_caption_content_color }}">
                                    {{ content.section_staticslider_caption_content_text }}
                                </h3>
                                {% endif %}
                                
                                {% if content.section_staticslider_caption_content_type == 'desc' %}
                                <p data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="mb-5 {{ content.section_staticslider_caption_content_size }} {{ content.section_staticslider_caption_content_weight }} {{ content.section_staticslider_caption_content_color }}">
                                    {{ content.section_staticslider_caption_content_text }}
                                </p>
                                {% endif %}
                                
                                {% if content.section_staticslider_caption_content_type == 'list' %}
                                <div data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="py-1 {{ content.section_staticslider_caption_content_size }} {{ content.section_staticslider_caption_content_color }}">
                                    <i class="{{ content.section_staticslider_caption_content_icon }} text-center line-height-tight d-inline-block w-10r h-6r mr-2"></i> 
                                    {{ content.section_staticslider_caption_content_text }}
                                </div>
                                {% endif %}
                                
                                {% if content.section_staticslider_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_staticslider_caption_btn_size }} {{ content.section_staticslider_caption_btn_color }}" href="{{ content.section_staticslider_caption_content_btn_clink ? content.section_staticslider_caption_content_btn_clink : (content.section_staticslider_caption_content_btn_plink | staticPage) }}">
                                    <span>{{ content.section_staticslider_caption_content_text }}<i class="fa fa-chevron-right"></i></span>
                                </a>
                                {% endif %}
                                 
                                {% endfor %}
                                {% endif %}
                                
                                {% if fields.section_staticslider_caption_type == 'image' %}
                                
                                {% set animation = fields.section_staticslider_caption_media_anim %}
                                {% set delay = fields.section_staticslider_caption_media_delay %}
                                {% set duration = fields.section_staticslider_caption_media_durat %}
                                
                                <img data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="w-100 img-fluid rounded" src="{{ fields.section_staticslider_caption_image|media|resize(550, 350, { mode: 'crop' }) }}" />
                                {% endif %}
                                
                                {% if fields.section_staticslider_caption_type == 'video' %}  
                                <div data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="embed-responsive embed-responsive-16by9">
                                    <video class="embed-responsive-item" controls="">
                                        <source src="{{ fields.section_staticslider_caption_video|media }}" type="video/mp4" />
                                        Your browser does not support HTML5 video.
                                    </video>
                                </div>
                                {% endif %}
                                
                                {% if fields.section_staticslider_caption_type == 'youtube' %}
                                <div data-animation="animated {{ animation }} delay-{{ delay }} duration-{{ duration }}" class="embed-responsive embed-responsive-16by9">
                                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ fields.section_staticslider_caption_svideo }}" frameborder="0" allowfullscreen></iframe>
                                </div>
                                {% endif %}
                
                                {% if fields.section_staticslider_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/{{ fields.section_staticslider_caption_svideo }}"></iframe>
                                </div>
                                {% endif %}
    
                            </div>
                            {% endfor %}
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Static Slider -->
</div>

{% put scripts %}
<script>
// bsTouchSlider
$('#staticslider-{{ data.section_staticslider_id }}').bsTouchSlider();

// YTPlayer
$(document).ready(function(){
{% if data.section_staticslider_type == 'youtube' %}
    $("#player-bgYoutube").YTPlayer();
{% elseif data.section_staticslider_type == 'vimeo' %}
    $("#player-bgVimeo").vimeo_player();
{% endif %}
});

// Particles-JS
{% if data.section_staticslider_particles is not empty %}
particlesJS("particles-{{ data.section_slider_id }}",{particles:{number:{value:80,density:{enable:!0,value_area:700}},color:{value:"{{ data.section_staticslider_particles_pcolor }}"},shape:{type:"circle",stroke:{width:0,color:"#000000"},polygon:{nb_sides:5}},opacity:{value:.5,random:!1,anim:{enable:!1,speed:1,opacity_min:.1,sync:!1}},size:{value:3,random:!0,anim:{enable:!1,speed:40,size_min:.1,sync:!1}},line_linked:{enable:!0,distance:150,color:"{{ data.section_staticslider_particles_lcolor }}",opacity:.4,width:1},move:{enable:!0,speed:6,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:600,rotateY:1200}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!1,mode:"grab"},onclick:{enable:!1,mode:"push"},resize:!0},modes:{grab:{distance:140,line_linked:{opacity:1}},bubble:{distance:400,size:40,duration:2,opacity:8,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}}},retina_detect:!0});
{% endif %}
</script>
{% endput %}