@if($slider->count())   
<div class="col-md-12 mb-3">
    <div class="swiper">
        <div class="swiper-wrapper">
            
                <div class="panorama-slider superior">
                    <div class="swiper superior">
                        <div class="swiper-pagination"></div>
                        <div class="swiper-wrapper">
                            @for($z=0; $z<$slider->count(); $z++)
                            <div class="swiper-slide">
                                <img class="slide-image" src="{{ asset('/anuncios/banner/'.$slider[$z]->imagen) }}">
                            </div>
                            @endfor
                        </div>
                    </div>
                </div>

        </div>
    </div>
</div>
@endif


@push('script')
<script type="text/javascript">
    

const swiper = new Swiper('.panorama-slider .superior', {
  // pass Panorama module
  modules: [EffectPanorama],
  // enable "panorama" effect
  effect: 'panorama',
  slidesPerView: 1.5,
  loop: true,
  loopAdditionalSlides: 1,
  centeredSlides: true,
  grabCursor: true,
  pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true,
    dynamicMainBullets: 3,
  },
  
  autoplay: {
    delay: 3000,
  },
  // panorama effect parameters
  panoramaEffect: {
    depth: 150,
    rotate: 45,
  },
  breakpoints: {
    480: {
      slidesPerView: 2,
      panoramaEffect: {
        rotate: 35,
        depth: 150,
      },
    },
    640: {
      slidesPerView: 3,
      panoramaEffect: {
        rotate: 30,
        depth: 150,
      },
    },
    1024: {
      slidesPerView: 4,
      panoramaEffect: {
        rotate: 30,
        depth: 200,
      },
    },
    1200: {
      slidesPerView: 4,
      panoramaEffect: {
        rotate: 25,
        depth: 250,
      },
    },
  },
});

    
    
const swiper2 = new Swiper('.inferior-swiper', {
  modules: [SwiperGL],
  speed: 1000,
  effect: 'gl',
  loop: true,
  gl: {
    shader: 'random',
  },
  autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
});
    
</script>
@endpush