@php $slides=DB::table('news')->orderBy('id','desc')->where('show_in_slider','1')->take(6)->get(); @endphp

         {{--<section id="homepage-slider">
            <div id="rev_slider_3_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:700px;">
               <!-- START REVOLUTION SLIDER 4.6.5 fullwidth mode -->
               <div id="rev_slider_3_1" class="rev_slider fullwidthabanner" style="display:none;max-height:700px;height:700px;">
                  <ul>
                    @php $counter=count($slides); @endphp
                    @foreach($slides as $item)
                     <!-- SLIDE  -->
                     <li data-transition="random" data-slotamount="7" data-masterspeed="1000" data-thumb="@if(isset($slides[$counter-1])) {{asset('storage')}}/{{$slides[$counter-1]->image}} @else  @endif"  data-saveperformance="off"  data-title="Slide 01">
                        <!-- MAIN IMAGE -->
                        <img src="{{asset('front_assets/wp-content/plugins/revslider/images/dummy.png')}}"  alt="slide_2020_01" data-lazyload="{{asset('storage')}}/{{$item->image}}" data-bgposition="center top" data-bgfit="100% 100%" data-bgrepeat="no-repeat">
                        <!-- LAYERS -->
                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption lfl ltr" 
                           data-x="-3" 
                           data-y="472"  
                           data-speed="1000" 
                           data-start="1200" 
                           data-easing="Power3.easeIn" 
                           data-elementdelay="0.1" 
                           data-endelementdelay="0.1" 
                           data-endspeed="500" 
                           data-endeasing="Power2.easeOut" 
                           style="z-index: 5;"><img src="{{asset('front_assets/wp-content/plugins/revslider/images/dummy.png')}}" alt="" data-lazyload="{{asset('front_assets/wp-content/uploads/bg_banner_caption.png')}}"> 
                        </div>
                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption slide-caption-right sfb tp-resizeme" 
                           data-x="318" 
                           data-y="512"  
                           data-speed="800" 
                           data-start="2200" 
                           data-easing="Power3.easeInOut" 
                           data-splitin="none" 
                           data-splitout="none" 
                           data-elementdelay="0.1" 
                           data-endelementdelay="0.1" 
                           data-endspeed="300" 
                           style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;"> {{substr($item->en_title,0,27)}}<br/>
                           {{substr($item->en_title,27,51)}}<br/>
                           {{substr($item->en_title,51,75)}}
                        </div>
                     </li>
                     @php $counter-=1; @endphp
                     @endforeach
                  </ul>
                  <div class="tp-bannertimer"></div>
               </div>
               <style scoped>.tp-caption.small_light_white,.small_light_white{font-size:17px;line-height:28px;font-weight:300;font-family:"Open Sans";color:rgb(255,255,255);text-decoration:none;background-color:transparent;padding:0px;border-width:0px;border-color:rgb(255,214,88);border-style:none}.tp-caption.slide-caption-right,.slide-caption-right{color:#ffffff;text-shadow:rgba(0,0,0,0.701961) 0px 1px 0px;text-decoration:none;font-size:30px;line-height:35px;font-family:"Open Sans";text-transform:uppercase;background-color:transparent;border-width:0px;border-color:rgb(0,0,0);border-style:none}</style>
               <script type="text/javascript">
                  /******************************************
                  	-	PREPARE PLACEHOLDER FOR SLIDER	-
                  ******************************************/
                  
                  
                  var setREVStartSize = function() {
                  	var	tpopt = new Object();
                  		tpopt.startwidth = 1920;
                  		tpopt.startheight = 700;
                  		tpopt.container = jQuery('#rev_slider_3_1');
                  		tpopt.fullScreen = "off";
                  		tpopt.forceFullWidth="on";
                  
                  	tpopt.container.closest(".rev_slider_wrapper").css({height:tpopt.container.height()});tpopt.width=parseInt(tpopt.container.width(),0);tpopt.height=parseInt(tpopt.container.height(),0);tpopt.bw=tpopt.width/tpopt.startwidth;tpopt.bh=tpopt.height/tpopt.startheight;if(tpopt.bh>tpopt.bw)tpopt.bh=tpopt.bw;if(tpopt.bh<tpopt.bw)tpopt.bw=tpopt.bh;if(tpopt.bw<tpopt.bh)tpopt.bh=tpopt.bw;if(tpopt.bh>1){tpopt.bw=1;tpopt.bh=1}if(tpopt.bw>1){tpopt.bw=1;tpopt.bh=1}tpopt.height=Math.round(tpopt.startheight*(tpopt.width/tpopt.startwidth));if(tpopt.height>tpopt.startheight&&tpopt.autoHeight!="on")tpopt.height=tpopt.startheight;if(tpopt.fullScreen=="on"){tpopt.height=tpopt.bw*tpopt.startheight;var cow=tpopt.container.parent().width();var coh=jQuery(window).height();if(tpopt.fullScreenOffsetContainer!=undefined){try{var offcontainers=tpopt.fullScreenOffsetContainer.split(",");jQuery.each(offcontainers,function(e,t){coh=coh-jQuery(t).outerHeight(true);if(coh<tpopt.minFullScreenHeight)coh=tpopt.minFullScreenHeight})}catch(e){}}tpopt.container.parent().height(coh);tpopt.container.height(coh);tpopt.container.closest(".rev_slider_wrapper").height(coh);tpopt.container.closest(".forcefullwidth_wrapper_tp_banner").find(".tp-fullwidth-forcer").height(coh);tpopt.container.css({height:"100%"});tpopt.height=coh;}else{tpopt.container.height(tpopt.height);tpopt.container.closest(".rev_slider_wrapper").height(tpopt.height);tpopt.container.closest(".forcefullwidth_wrapper_tp_banner").find(".tp-fullwidth-forcer").height(tpopt.height);}
                  };
                  
                  /* CALL PLACEHOLDER */
                  setREVStartSize();
                  
                  
                  var tpj=jQuery;
                  tpj.noConflict();
                  var revapi3;
                  
                  tpj(document).ready(function() {
                  
                  if(tpj('#rev_slider_3_1').revolution == undefined){
                  	revslider_showDoubleJqueryError('#rev_slider_3_1');
                  }else{
                     revapi3 = tpj('#rev_slider_3_1').show().revolution(
                  	{	
                  								dottedOverlay:"none",
                  		delay:6000,
                  		startwidth:1920,
                  		startheight:700,
                  		hideThumbs:200,
                  
                  		thumbWidth:100,
                  		thumbHeight:50,
                  		thumbAmount:5,
                  		
                  								
                  		simplifyAll:"off",
                  
                  		navigationType:"bullet",
                  		navigationArrows:"solo",
                  		navigationStyle:"preview4",
                  
                  		touchenabled:"on",
                  		onHoverStop:"off",
                  		nextSlideOnWindowFocus:"off",
                  
                  		swipe_threshold: 75,
                  		swipe_min_touches: 1,
                  		drag_block_vertical: false,
                  		
                  								
                  								
                  		keyboardNavigation:"off",
                  
                  		navigationHAlign:"center",
                  		navigationVAlign:"bottom",
                  		navigationHOffset:0,
                  		navigationVOffset:20,
                  
                  		soloArrowLeftHalign:"left",
                  		soloArrowLeftValign:"center",
                  		soloArrowLeftHOffset:20,
                  		soloArrowLeftVOffset:0,
                  
                  		soloArrowRightHalign:"right",
                  		soloArrowRightValign:"center",
                  		soloArrowRightHOffset:20,
                  		soloArrowRightVOffset:0,
                  
                  		shadow:0,
                  		fullWidth:"on",
                  		fullScreen:"off",
                  
                  								spinner:"spinner0",
                  								
                  		stopLoop:"off",
                  		stopAfterLoops:-1,
                  		stopAtSlide:-1,
                  
                  		shuffle:"off",
                  
                  		autoHeight:"off",
                  		forceFullWidth:"on",
                  		
                  		
                  		
                  		hideThumbsOnMobile:"off",
                  		hideNavDelayOnMobile:1500,
                  		hideBulletsOnMobile:"off",
                  		hideArrowsOnMobile:"off",
                  		hideThumbsUnderResolution:0,
                  
                  								hideSliderAtLimit:0,
                  		hideCaptionAtLimit:0,
                  		hideAllCaptionAtLilmit:0,
                  		startWithSlide:0					});
                  
                  
                  
                  					}
                  });	/*ready*/
                  
               </script>
            </div>
            <!-- END REVOLUTION SLIDER -->		
         </section>--}}
  <style>
    .slideshow-container {
      position: relative;
      margin: auto;
      width: 80%;
      height: 400px;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .slide.active {
      opacity: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: none;
    }

    .prev,
    .next {
      position: absolute;
      top: 38%;
      transform: translateY(-50%);
      font-size: 24px;
      padding: 16px;
      color: white;
      background-color: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }
    @media screen and (max-width: 1023px) {
  /* Screen size is smaller than 1024px */
  .slider-cust-top-padding {
    padding-top: 0;
  }
}

@media screen and (min-width: 1024px) {
  /* Screen size is equal to or larger than 1024px */
  .slider-cust-top-padding {
    padding-top: 78px;
  }
}

  </style>
  <section id="homepage-slider" class="slider-cust-top-padding" style="background-color:#11598914;">
  <div class="slideshow-container">
    <div class="slide active">
      <img src="https://gulfstatesgroupllc.com/gsgc.png" alt="Slide 1">
    </div>
    <div class="slide">
      <img src="https://gulfstatesgroupllc.com/construction.png" alt="Slide 2">
    </div>
  </div>
  <div class="prev" onclick="prevSlide()">&#10094;</div>
  <div class="next" onclick="nextSlide()">&#10095;</div>
</section>
  <script>
    var slideIndex = 0;
    var slides = document.getElementsByClassName("slide");

    function showSlide(index) {
      if (index < 0) {
        slideIndex = slides.length - 1;
      } else if (index >= slides.length) {
        slideIndex = 0;
      }

      for (var i = 0; i < slides.length; i++) {
        if (i === slideIndex) {
          slides[i].classList.add("active");
        } else {
          slides[i].classList.remove("active");
        }
      }
    }

    function prevSlide() {
      slideIndex--;
      showSlide(slideIndex);
    }

    function nextSlide() {
      slideIndex++;
      showSlide(slideIndex);
    }

    function startSlideshow() {
      showSlide(slideIndex);
      // setInterval(function() {
      //   nextSlide();
      // }, 5000);
    }

    startSlideshow();
  </script>