@extends('Frontend.partials.layout')

@section('styles')
<link rel="stylesheet" href="{{ asset('/vendor/libs/swiper/swiper.css') }}">
@endsection

@section('content')
<style>
    @media only screen and (min-width: 992px) {
        .col-md-offset-3 {
            margin-left: 25%;
        }
    }


    .swiper-container .swiper-slide {
      padding: 0;
      height: 500px'
      text-align: center;
      font-size: 1.5rem;
      background: #ecebed;
    }

    .dark-style .swiper-container .swiper-slide {
      background: #2f3237;
    }

    #swiper-vertical {
      max-height: 195px;
    }

    #swiper-3d-cube-effect {
      max-width: 300px;
    }

    #swiper-3d-coverflow-effect .swiper-slide {
      max-width: 300px;
    }

    #swiper-3d-flip-effect,
    #swiper-3d-flip-effect .swiper-slide {
      max-width: 300px;
    }

    #swiper-3d-flip-effect {
      padding: 50px;
    }
    .swiper-container .swiper-slide img {width: 100%;height: 100%;}
    div#swiper-with-pagination {
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        overflow: hidden;
        list-style: none;
        padding: 0;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: .3;
    }
</style>
 


<div class="card mb-4">
    <h6 class="card-header">
        <div class="analysis-content-header d-flex align-items-center">
            <div class="logo">
                <i class="fas fa-home primary-color"></i>
            </div>
            <div class="heading primary-color">
                <h2>Farblang</h2>
                <p>Farblang Constellation Mini</p>
            </div>
        </div>
    </h6>
    <div class="card-body animation-no-padding">
        <div class="frablang-main-animation-section">
            <div class="frablang-mid-section">
                <div class="frablang-user-img">
                    <img src="{{ asset('images/avatar.png') }}" alt="" class="d-block rounded-circle">
                </div>
                <div class="frablang-text">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus, at?</p>
                </div>
                <!-- animation -->
                <!-- <div class="frablang-animation-gif"></div> -->
            </div>
            <!-- bg full animation -->
            <div class="frablang-animation-gif-bg">
                <img src="{{ asset('frablang_img/tdback4.gif') }}" alt="tdback3">
            </div>
             <!-- slider -->
            <div class="swiper-container" id="swiper-with-pagination">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0001.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0002.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0003.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0004.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0005.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0006.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0007.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0008.jpg') }}" alt=""></div>
                    <div class="swiper-slide"><img src="{{ asset('images/frablang/p_0009.jpg') }}" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('/vendor/libs/swiper/swiper.js') }}"></script>
<script>
    var swiperWithPagination = new Swiper('#swiper-with-pagination', {
        pagination: {
        el: '.swiper-pagination',
        clickable: true
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        }
    });
</script>
<!-- <script>
    $( document ).ready(function() {
        $('#next_action').click(function(){
            $('.farblang-section').hide();
            $('.animation-no-padding').css('padding','0');
            $('.frablang-main-animation-section').show();
            console.log( "ready!" );
        });

    });
</script> -->
@endsection