<section class="hero">
  <!-- Load Swiper CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  
  <div class="swiper heroSwiper">
    <div class="swiper-wrapper">

      <?php
      $hero = new WP_Query([
        'post_type'      => 'slides',
        'posts_per_page' => -1,
        'orderby'        => 'menu_order',
        'order'          => 'ASC'
      ]);

      if ($hero->have_posts()):
        while ($hero->have_posts()): $hero->the_post();
          $bg   = get_the_post_thumbnail_url(get_the_ID(), 'full');
          $text = get_post_meta(get_the_ID(), '_slide_text', true);
          $link = get_post_meta(get_the_ID(), '_slide_link', true);
      ?>

      <div class="swiper-slide ">
        <div class="hero-bg" style="background-image:url('<?php echo esc_url($bg); ?>')"></div>
        <div class="hero-overlay"></div>

        <div class="hero-content">
          <h1><?php the_title(); ?></h1>

          <?php if ($text): ?>
            <p><?php echo esc_html($text); ?></p>
          <?php endif; ?>

          <?php if ($link): ?>
            <a class="hero-btn" href="<?php echo esc_url($link); ?>">Read More</a>
          <?php endif; ?>
        </div>
      </div>

      <?php endwhile; wp_reset_postdata(); endif; ?>

    </div>

    <div class="swiper-button-prev mine-btn"></div>
    <div class="swiper-button-next mine-btn"></div>
    <div class="swiper-pagination"></div>
  </div>
</section>

<!-- Slanted divider after slider -->
<div class="aftaslider">&nbsp;</div>

<!-- Load Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initializing Swiper...');
    
    try {
        const swiper = new Swiper('.heroSwiper', {
            // Enable looping
            loop: true,
            
            // Autoplay (uncomment to enable)
            // autoplay: {
            //     delay: 3000,
            //     disableOnInteraction: false,
            // },
            
            // If you want it to automatically slide
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            
            // Speed of transition
            speed: 1000,
            
            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            
            // Pagination dots
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                dynamicBullets: true,
            },
            
            // Default parameters
            slidesPerView: 1,
            spaceBetween: 0,
            
            // Optional effects
            // effect: 'fade',
            // fadeEffect: {
            //     crossFade: true
            // },
            
            // Enable debug
            on: {
                init: function () {
                    console.log('Swiper initialized successfully!');
                    console.log('Number of slides:', this.slides.length);
                }
            }
        });
        
        // Expose swiper to global for debugging
        window.mySwiper = swiper;
        
    } catch (error) {
        console.error('Swiper initialization error:', error);
    }
});
</script>

