<?php
$slides = [];
for ( $i = 1; $i <= 3; $i++ ) {
    $img = get_theme_mod( "howcan_slider_image_$i" );
    if ( $img ) {
        $slides[] = array(
            'image' => $img,
            'title' => get_theme_mod( "howcan_slider_title_$i" ),
            'subtitle' => get_theme_mod( "howcan_slider_subtitle_$i" ),
            'btn_text' => get_theme_mod( "howcan_slider_btn_text_$i" ),
            'btn_link' => get_theme_mod( "howcan_slider_btn_link_$i" ),
        );
    }
}
if ( empty( $slides ) ) return;
?>
<section class="howcan-slider my-2">
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <?php foreach ( $slides as $slide ) : ?>
      <div class="swiper-slide howcan-slide" style="background-image:url('<?php echo esc_url( $slide['image'] ); ?>');">
        <div class="howcan-slider-overlay"></div>
        <div class="howcan-slider-content text-center text-white">
          <?php if ( ! empty( $slide['title'] ) ) : ?>
            <h2 class="howcan-slide-title"><?php echo esc_html( $slide['title'] ); ?></h2>
          <?php endif; ?>
          <?php if ( ! empty( $slide['subtitle'] ) ) : ?>
            <?php
              $subtitle = wp_strip_all_tags( $slide['subtitle'] );
              $subtitle = wp_trim_words( $subtitle, 5, '...' );
            ?>
            <p class="howcan-slide-subtitle"><?php echo esc_html( $subtitle ); ?></p>
          <?php endif; ?>
          <?php if ( ! empty( $slide['btn_text'] ) ) : ?>
            <a href="<?php echo esc_url( $slide['btn_link'] ); ?>" class="btn btn-primary howcan-slide-btn">
              <?php echo esc_html( $slide['btn_text'] ); ?>
            </a>
          <?php endif; ?>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
  new Swiper('.mySwiper', {
    loop: true,
    autoplay: { delay: 4000 },
    effect: 'fade',
    speed: 800,
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  new Swiper('.mySwiper', {
    loop: true,
    autoplay: { delay: 4000 },
    effect: 'fade',
    speed: 800,
  });
});
</script>