@extends('layouts.app')

@section('content')

<style>
    .tp-caption.ultra-big-white.text-white {
    line-height: 110% !important;
    text-shadow: 2px 2px #000 !important;
    font-weight: 600 !important;
}
</style>


    <!-- revolution slider begin -->
    <section id="section-slider" class="fullwidthbanner-container" aria-label="section-slider">
        <div id="slider-revolution">
            <ul>
                @if(!empty($banners) )
                    @foreach($banners as $banner)
                        <li data-transition="fade" data-slotamount="10" data-masterspeed="200" data-thumb="">
                            <!--  BACKGROUND IMAGE -->
                            <img alt="{{ $banner->title }}" class="rev-slidebg" data-bgparallax="0" src="{{ asset($banner->image) }}" />
                            <div
                                class="tp-caption ultra-big-white text-white text-center"
                                data-x="center"
                                data-y="350"
                                data-width="1000"
                                data-height="none"
                                data-whitespace="wrap"
                                data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                                data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.85;scaleY:0.85;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                                data-speed="1000"
                                data-start="1000"
                                data-easing="easeInOutExpo"
                                data-endspeed="400"
                            >
                                {{ $banner->title }}
                            </div>
                        </li>
                    @endforeach
                @endif
            </ul>
        </div>
    </section>
    <!-- revolution slider close -->
@endsection

@section('js')
    <script type="text/javascript"></script>
@endsection