@extends('layouts.app') 

@section('title','Gallery - Dusty helmets')

@section('content')
    <style type="text/css">

.slider {
  width: 90vmin;
  height: 90vmin;
  -webkit-perspective: 100vmin;
          perspective: 100vmin;
  margin: auto;
  -webkit-perspective-origin: top center;
          perspective-origin: top center;
  position: relative;
  box-sizing: border-box;
}
.slider__item {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 15vmin;
  box-sizing: border-box;
  -webkit-transition: -webkit-transform 0.18s ease;
  transition: -webkit-transform 0.18s ease;
  transition: transform 0.18s ease;
  transition: transform 0.18s ease, -webkit-transform 0.18s ease;
}
.slider__item:nth-child(1) {
  -webkit-transform: translate3d(0, 0, 0vmin);
          transform: translate3d(0, 0, 0vmin);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  z-index: 7;
}
.slider__item:nth-child(2) {
  -webkit-transform: translate3d(0, 0, -15vmin);
          transform: translate3d(0, 0, -15vmin);
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
  z-index: 6;
}
.slider__item:nth-child(3) {
  -webkit-transform: translate3d(0, 0, -30vmin);
          transform: translate3d(0, 0, -30vmin);
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
  z-index: 5;
}
.slider__item:nth-child(4) {
  -webkit-transform: translate3d(0, 0, -45vmin);
          transform: translate3d(0, 0, -45vmin);
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
  z-index: 4;
}
.slider__item:nth-child(5) {
  -webkit-transform: translate3d(0, 0, -60vmin);
          transform: translate3d(0, 0, -60vmin);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  z-index: 3;
}
.slider__item:nth-child(6) {
  -webkit-transform: translate3d(0, 0, -75vmin);
          transform: translate3d(0, 0, -75vmin);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
  z-index: 2;
}
.slider__item:nth-child(7) {
  -webkit-transform: translate3d(0, 0, -90vmin);
          transform: translate3d(0, 0, -90vmin);
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  z-index: 1;
}
.slider__item:nth-child(8) {
  -webkit-transform: translate3d(0, 0, -105vmin);
          transform: translate3d(0, 0, -105vmin);
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
  z-index: 0;
}
.slider__image {
  width: 100%;
  height: 80%;
  background-color: #999;
  border: 1.5vmin solid #eee;
  box-sizing: border-box;
  box-shadow: 0px 3vmin 3vmin rgba(0, 0, 0, 0.75), 0 -1.5vmin 2.7vmin rgba(0, 0, 0, 0.75);
  overflow: hidden;
  display: block;
  -webkit-transition: opacity 0.2s ease, -webkit-transform 0.18s ease;
  transition: opacity 0.2s ease, -webkit-transform 0.18s ease;
  transition: transform 0.18s ease, opacity 0.2s ease;
  transition: transform 0.18s ease, opacity 0.2s ease, -webkit-transform 0.18s ease;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.slider__caption {
  height: 20%;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__btn {
    background: #fbaf32db;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 50%;
  width: 9vmin;
  height: 9vmin;
  margin: 2vmin auto;
  border-right: 2vmin solid rgba(255, 255, 255, 0.8);
  border-bottom: 2vmin solid rgba(255, 255, 255, 0.65);
  z-index: 100;
  cursor: pointer;
  -webkit-transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
          transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
}
.slider__bck {
    background: #fbaf32db;
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 0;
  width: 9vmin;
  height: 9vmin;
  margin: 2vmin auto;
  border-left: 1vmin solid rgba(255, 255, 255, 0.8);
  border-top: 1vmin solid rgba(255, 255, 255, 0.65);
  z-index: 100;
  cursor: pointer;
  -webkit-transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
          transform: perspective(10vmin) rotateX(-30deg) rotateZ(45deg);
}
.slider__btn:active {
  border-right-color: #dd6;
  border-bottom-color: #dd6;
}
.btn-arrow {
  position: relative;
}
.btn-arrow:after, .btn-arrow:before {
  position: absolute;
  line-height: 0;
  content: '';
}
.btn-arrow:before {
  z-index: 10;
}
.btn-arrow:after {
  z-index: 9;
}
.btn-arrow-left:before,
.btn-arrow-right:before {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  top: 50%;
  margin-top: -6px;
}
.btn-arrow-left:after,
.btn-arrow-right:after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  top: 50%;
  margin-top: -8px;
}
.btn-warning.btn-arrow-left:before {
  border-right: 6px solid #f0ad4e;
  left: -6px;
}
.btn-warning.btn-arrow-left:after {
  border-right: 8px solid #eea236;
  left: -8px;
}
.btn-warning.btn-arrow-left.focus:before, .btn-warning.btn-arrow-left:focus:before {
  border-right-color: #ec971f;
}
.btn-warning.btn-arrow-left.focus:after, .btn-warning.btn-arrow-left:focus:after {
  border-right-color: #985f0d;
}
.btn-warning.btn-arrow-left:hover:before {
  border-right-color: #ec971f;
}
.btn-warning.btn-arrow-left:hover:after {
  border-right-color: #d58512;
}
.btn-warning.btn-arrow-right:before {
  border-left: 6px solid #f0ad4e;
  right: -6px;
}
.btn-warning.btn-arrow-right:after {
  border-left: 8px solid #eea236;
  right: -8px;
}
.btn-warning.btn-arrow-right.focus:before, .btn-warning.btn-arrow-right:focus:before {
  border-left-color: #ec971f;
}
.btn-warning.btn-arrow-right.focus:after, .btn-warning.btn-arrow-right:focus:after {
  border-left-color: #985f0d;
}
.btn-warning.btn-arrow-right:hover:before {
  border-left-color: #ec971f;
}
.btn-warning.btn-arrow-right:hover:after {
  border-left-color: #d58512;
}


</style>
     <!-- Page Header Start -->
     <!-- p8/pic1 -->
        <div class="page-header mb-0" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(assets/P6/pic2.jpg);background-position: center;
    background-repeat: no-repeat;
    background-size: cover;">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2>Gallery</h2>
                    </div>
                    <div class="col-12">
                        <a href="{{url('/')}}">Home</a>
                        <a href="{{url('/mission')}}">Gallery</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Header End -->

          <div class="about">
              <div class="container">
                 <div class="row align-items-center">
                    
                    <div class="col-md-12">
                        <div class="about-content">
                            <div class="section-header" style="margin-bottom: 10px !important;">
                                <p>Gallery</p>
                            </div>
                            <div class="about-text">
                                <p>
                                    Click on the arrow to scroll through pictures
                                </p>
                             </div>
                        </div>
                    </div>
                </div>
            <div style="border-left: 1px solid #fbaf32 !important;
border-right: 1px solid #fbaf32 !important;
border-radius: 20px;">
           <div class="slider">
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G2.jpg"/>
            <figcaption class="slider__caption">Image - 01</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G1.jpg"/>
            <figcaption class="slider__caption">Image - 02</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G5.jpg"/>
            <figcaption class="slider__caption">Image - 05</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G6.jpg"/>
            <figcaption class="slider__caption">Image - 06</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G7.jpg"/>
            <figcaption class="slider__caption">Image - 07</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G8.jpg"/>
            <figcaption class="slider__caption">Image - 08</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G9.jpg"/>
            <figcaption class="slider__caption">Image - 09</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G11.jpg"/>
            <figcaption class="slider__caption">Image - 11</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G12.jpg"/>
            <figcaption class="slider__caption">Image - 12</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G13.jpg"/>
            <figcaption class="slider__caption">Image - 13</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G14.jpg"/>
            <figcaption class="slider__caption">Image - 14</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G15.jpg"/>
            <figcaption class="slider__caption">Image - 15</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G3.jpg"/>
            <figcaption class="slider__caption">Image - 03</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G4.jpg"/>
            <figcaption class="slider__caption">Image - 04</figcaption>
          </figure>
          <figure class="slider__item"><img class="slider__image" src="assets/Gallery/img/G10.jpg"/>
            <figcaption class="slider__caption">Image - 10</figcaption>
          </figure>
        </div>
        <div class="d-flex justify-content-center">
            <button type="button" class="btn btn-arrow btn-arrow-left btn-warning btn-outline" onclick="bck()">Previous</button>
            <span>&nbsp;&nbsp;</span>
            <button type="button" class="btn btn-arrow btn-arrow-right btn-warning" onclick="fnt()">Next</button>
        </div>
        
        <!--<div class="slider__btn" onclick="fnt()" title="Next"></div>-->
        <!--<div class="slider__bck" onclick="bck()" title="Previous"></div>-->
        </div>
        
        </div> 
                </div>
        <script >
        
        
        var interval;
         var timer = function(){
         interval = setInterval(fnt, 5000);
        };
        
      function bck(){
        $(".slider__item").last().clone().insertBefore('.slider>*:first');
        $(".slider__image").last().css({transform: "rotateX(-180deg)", opacity: 0});
        clearInterval(interval);
        timer();
        setTimeout(function(){
            $(".slider__item").last().remove();
        },100);
    }
        function fnt(){
        $(".slider__item").first().clone().appendTo(".slider");
        $(".slider__image").first().css({transform: "rotateX(-180deg)", opacity: 0});
        clearInterval(interval);
        timer();
        setTimeout(function(){
            $(".slider__item").first().remove();
        },100);
    }
    window.onload = timer();
</script>
@endsection