@extends('layouts.law')
@section('content')

<style>
@media(max-width: 769px) {
.rev_slider_wrapper video, .rev_slider iframe {
display: none !important;
}
}
@media(max-width: 769px) {
    .home .rev_slider > ul li:nth-child(3) {
        display:none !important;
   }
}
</style>

    <section id="home" class="divider">
      <div class="container-fluid p-0">

      <!-- Slider Revolution Start -->
      <div class="rev_slider_wrapper" >
        <div class="rev_slider tp-overflow-hidden" data-version="5.0"  >
          <ul>
            @foreach($sliders as $slider)

              @if($slider->type == "Image")
                                <!-- SLIDE 1 -->
                <li data-index="rs-1" data-transition="random" data-slotamount="7"  data-easein="default" data-easeout="default" data-masterspeed="1000"  data-thumb="{{ asset('storage/banners/'. $slider->filename) }}"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="" data-delay="{{ $duration }}" >
                  <!-- MAIN IMAGE -->
                  <img src="{{ asset('storage/banners/'. $slider->filename) }}"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-bgparallax="5" data-no-retina>
                </li>
              @else



                <!-- SLIDE 2 -->


                <li data-index="rs-2" data-transition="random" data-slotamount="7"  data-easein="default" data-easeout="default" data-masterspeed="1000"  data-thumb="{{ asset('storage/banners/thumbnail.png') }}"  data-rotate="0"  data-fstransition="random" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="" data-delay="5000"  > 
                  <!-- MAIN IMAGE -->
                  <!--<div class="ls-l" style="top:10px;left:100%;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeInOutExpo;rotatexin:20;scalexin:0.8;scaleyin:0.8;transformoriginin:50% 50% -150;offsetxout:0;durationout:1000;rotatexout:-20;scalexout:0.8;scaleyout:0.8;transformoriginout:50% 50% -150;">-->
                    <div class="rs-background-video-layer bg-video" 
                        data-forcerewind="on" 
                        data-videowidth="100%" 
                        data-videoheight="100%"
                        data-videomp4="{{ asset('storage/banners/'. $slider->filename) }}" 
                        data-videopreload="preload" 
                        data-videoattributes="loop=loop"
                        data-forceCover="1" 
                        data-aspectratio="16:9" 
                        data-autoplay="true" 
                        data-autoplayonlyfirsttime="false" 
                        data-nextslideatend="true"
                        allow="autoplay"
                        

                    >   
                    <!--   
                    <iframe src="{{ asset('storage/banners/'. $slider->filename) }}" width="1920" height="1280" data-videowidth="100%" >
                    </iframe>
                    -->
                    
                  </div>
                  




                </li>

              @endif

            @endforeach

          </ul>
        </div><!-- end .rev_slider -->
      </div><!-- end .rev_slider_wrapper -->
      <script>
        $(document).ready(function(e) {
          $(".rev_slider").revolution({
            sliderType:"standard",
            sliderLayout: "fullscreen",
            dottedOverlay: "none",
            delay: 6000,
            navigation: {
                keyboardNavigation: "on",
                keyboard_direction: "horizontal",
                mouseScrollNavigation: "off",
                onHoverStop: "off",
                touch: {
                    touchenabled: "on",
                    swipe_threshold: 75,
                    swipe_min_touches: 1,
                    swipe_direction: "horizontal",
                    drag_block_vertical: false
                },
                arrows: {
                    style: "gyges",
                    
                    enable: true,
                    hide_onmobile: false,
                    hide_onleave: true,
                    hide_delay: 200,
                    hide_delay_mobile: 1200,
                    
                    tmp: '',
                    left: {
                        h_align: "left",
                        v_align: "center",
                        h_offset: 0,
                        v_offset: 0
                    },
                    right: {
                        h_align: "right",
                        v_align: "center",
                        h_offset: 0,
                        v_offset: 0
                    }
                },
                bullets: {
                    enable: true,
                    hide_onmobile: false,
                    
                    //hide_under: 80,
                    
                    style: "hebe",
                    hide_onleave: false,
                    direction: "horizontal",
                    h_align: "center",
                    v_align: "bottom",
                    h_offset: 0,
                    v_offset: 30,
                    space: 5,
                    tmp: '<span class="tp-bullet-image"></span><span class="tp-bullet-imageoverlay"></span><span class="tp-bullet-title"></span>'
                }
            },
            responsiveLevels:[1170],
            gridwidth:[1170],
            gridheight:[570],
            lazyType: "none",
            parallax: {
                origo: "slidercenter",
                speed: 1000,
                levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 46, 47, 48, 49, 50, 100, 55],
                type: "scroll"
            },               
            shadow: 0,
            spinner: "off",
            stopLoop: "off",
            stopAfterLoops:-1,
            stopAtSlide:-1,
            shuffle: "off",
            autoHeight: "on",
            fullScreenAutoWidth: "on",
            fullScreenAlignForce: "on",
            fullScreenOffsetContainer: "",
            fullScreenOffset: "0",
            hideThumbsOnMobile: "off",
            hideSliderAtLimit: 0,
            hideCaptionAtLimit: 0,
            hideAllCaptionAtLimit: 0,
            debugMode: false,
            fallbacks: {
                simplifyAll: "off",
                nextSlideOnWindowFocus: "off",
                disableFocusListener: false,
            }
          });
        });
      </script>
      <!-- Slider Revolution Ends -->

      </div>
    </section>

@endsection