<!--<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="home-kens-burns swiper-scale-effect">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide1 swiper-slide-cover"></div>
      <!--<div class="slide-caption">Slide 1</div>-->
    </div>
    <div class="swiper-slide">
      <div class="slide2 swiper-slide-cover"></div>
      
    </div>
    <div class="swiper-slide">
      <div class="slide3 swiper-slide-cover"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide4 swiper-slide-cover"></div>
    </div>
    <div class="swiper-slide">
      <div class="slide5 swiper-slide-cover"></div>
    </div>
  </div>
</div>

<style>
/* base layout */
.home-kens-burns { width:100%; height:720px!important; position:relative; overflow:hidden; }
.home-kens-burns .swiper-wrapper, .home-kens-burns .swiper-slide { height:100%; }

/* make slide a positioned container */
.home-kens-burns .swiper-slide { position:relative; display:flex; align-items:center; justify-content:center; }

/* cover MUST be absolute and fill the slide */
.swiper-slide > .swiper-slide-cover {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-position:50% 50%;
  background-size:cover;
  pointer-events:none;
  transition: transform 10s ease-out !important; /* IMPORTANT: keep kenburns slow */
  transform: scale(1.25);
  z-index:0;
}

/* active slide cover reset to 1 so it slowly scales to normal */
.swiper-scale-effect .swiper-slide.swiper-slide-active > .swiper-slide-cover {
  transform: scale(1) !important;
}
@media (max-width: 991px) {
  .home-kens-burns { width:100%; height:560px!important; }
  }
/* example backgrounds */
.slide1 { background-image: url('/wp-content/uploads/2025/12/loungingwomen.jpg'); }
.slide2 { background-image: url('/wp-content/uploads/2025/12/couple-lounging-on-beach.jpg'); }
.slide3 { background-image: url('/wp-content/uploads/2025/12/skyline-slide.jpg'); }
  .slide4 { background-image: url('/wp-content/uploads/2025/12/rtiz-tower-facade.jpg'); }
  .slide5 { background-image: url('/wp-content/uploads/2025/12/waiting-room.jpg'); }
</style>

<script>
// window.addEventListener('load', function() {
 // document.addEventListener('DOMContentLoaded', function() {

  // If another Swiper exists, this will use the loaded Swiper; using v8 helps avoid conflicts.
  //try {
    var swiper = new Swiper('.home-kens-burns', {
      effect: 'fade',
      fadeEffect: { crossFade: true },
      autoplay: { delay: 10000, disableOnInteraction: false },
      speed: 10000,           // slow fade equal to ken-burns duration
      loop: true,
      pagination: false,
      navigation: false,
      // important for dynamic themes/DOM changes
      observer: true,
      observeParents: true,
      // help ensure our params aren't silently overridden (v8)
      overrideParams: true
    });

    // in case layout/images change, ensure swiper recalculates
    setTimeout(function(){ swiper.update(); }, 0);
    window.addEventListener('resize', function(){ swiper.update(); });
 // } catch (e) {
 //   console.error('Swiper init error:', e);
//  }
// });
</script>