Swiper Gallery

Overview

A touch‑enabled image carousel powered by Swiper.js, with aspect ratio control, shade overlays, and a live editor preview.

• Block name: method/swiper-gallery
• Category: method-component-blocks
• Supports: align (full)
• Render type: Dynamic (PHP render_callback)
• Inner blocks: No

Usage

The Swiper Gallery block creates a responsive image slideshow with swipe navigation, pagination dots, and prev/next arrows. Images are selected through WordPress’s media gallery picker.

1. Insert a Swiper Gallery block.
2. Click Select Images in the Inspector to open the media gallery.
3. Select multiple images and confirm.
4. Optionally configure aspect ratio and shade overlay in the Inspector.

The editor renders a live Swiper instance that can be navigated with the arrow buttons. Swiper is initialized via useEffect with proper cleanup on image changes.

Attributes

responsiveSettings Keys

• aspectUses — "ratio" to use a preset ratio, empty for natural (fluid) image sizing
• aspectRatio — Preset string like "-16-9", "-4-3", "-1-1"

Control Sets

Data & Dependencies

• Swiper.js: swiper-bundle.min.js and swiper-bundle.min.css are enqueued on all pages via method_swiper_gallery_enqueue_assets.
• Image sizes: The frontend renders images at the method_hd registered image size.
• Editor initialization: Swiper is initialized in a useEffect with a setTimeout(0) to ensure DOM readiness. The instance is stored in a ref and properly destroyed on cleanup.

Frontend Rendering

<div class="method-swiper-gallery" id="method-{id}">
  <div class="swiper">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <div class="method-fit-img-container {method-ratio method-ratio-X-Y?}">
          <div class="method-img-shade"> </div>
          <img class="method-fit-img" src="..." alt="..." />
        </div>
      </div>
      ...

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

<script>
document.addEventListener('DOMContentLoaded', function() {
  const swiper = new Swiper('#method-{id} .swiper', {
    loop: true,
    slidesPerView: 1,
    pagination: { el: '#method-{id} .swiper-pagination' },
    navigation: {
      nextEl: '#method-{id} .swiper-button-next',
      prevEl: '#method-{id} .swiper-button-prev',
    },
  });
});
</script>

<div class="method-swiper-gallery" id="method-{id}">
  <div class="swiper">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <div class="method-fit-img-container {method-ratio method-ratio-X-Y?}">
          <div class="method-img-shade"> </div>
          <img class="method-fit-img" src="..." alt="..." />
        </div>
      </div>
      ...

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

<script>
document.addEventListener('DOMContentLoaded', function() {
  const swiper = new Swiper('#method-{id} .swiper', {
    loop: true,
    slidesPerView: 1,
    pagination: { el: '#method-{id} .swiper-pagination' },
    navigation: {
      nextEl: '#method-{id} .swiper-button-next',
      prevEl: '#method-{id} .swiper-button-prev',
    },
  });
});
</script>

When no aspect ratio is set (aspectUses is empty), images render with method-swiper-img-container and method-fluid-img classes for natural dimensions. When a ratio is set, images use method-fit-img-container with method-ratio classes.

Filters

This block does not currently expose dedicated PHP filters. Swiper configuration (loop, slidesPerView, etc.) is hardcoded in the inline <script> tag. To customize Swiper options, override the render callback or use JavaScript to reinitialize Swiper after DOMContentLoaded.