WooCommerce: Combining Swiper Slider with PhotoSwipe Lightbox on Product Pages

In a recent Business Bloomer Club discussion, a WooCommerce user was integrating a custom image slider using SwiperJS on single product pages.

While the custom slider looked great, the user wanted to retain WooCommerce’s default PhotoSwipe lightbox functionality to allow users to click on the slider images and open them in a lightbox. This would preserve a familiar and intuitive product-viewing experience.

Combining SwiperJS and PhotoSwipe requires some additional JavaScript to connect the two libraries, ensuring that clicking on a slider image opens it in the PhotoSwipe lightbox. Let’s explore how to achieve this.

Why Use Both SwiperJS and PhotoSwipe?

While SwiperJS provides a smooth, touch-friendly slider experience, PhotoSwipe offers a dedicated, immersive lightbox view for high-resolution product images. Together, they create an enhanced and seamless browsing experience for mobile and desktop users alike.

Steps to Enable PhotoSwipe with SwiperJS

Below is a guide to setting up SwiperJS while retaining PhotoSwipe’s lightbox functionality on your WooCommerce single product pages.

Step 1: Initialize SwiperJS

Set up SwiperJS on your single product pages as you would normally:

const swiper = new Swiper('.swiper-container', {
  // Define your Swiper parameters
  slidesPerView: 1,
  spaceBetween: 10,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Step 2: Load PhotoSwipe and Define Event Listeners

To connect Swiper with PhotoSwipe, we’ll add a click event listener to the Swiper images. This will trigger the PhotoSwipe lightbox when an image is clicked. You’ll also need to load PhotoSwipe’s scripts and styles in your theme.

// Initialize PhotoSwipe for Swiper slides
const swiperSlides = document.querySelectorAll('.swiper-slide img');

swiperSlides.forEach((slide, index) => {
  slide.addEventListener('click', (event) => {
    event.preventDefault();

    // Define PhotoSwipe options
    const pswpElement = document.querySelectorAll('.pswp')[0];
    const items = Array.from(swiperSlides).map((img) => ({
      src: img.src,   // or use a larger image URL if available
      w: img.naturalWidth,
      h: img.naturalHeight,
    }));

    const options = {
      index: index,
      bgOpacity: 0.8,
      showHideOpacity: true,
    };

    const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
  });
});

Step 3: Add PhotoSwipe Markup

Ensure you have the PhotoSwipe HTML structure on your product page, typically placed at the end of the body.

<!-- Root element of PhotoSwipe -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with PhotoSwipe items -->
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- UI elements go here -->
    </div>
</div>

Summary

By combining SwiperJS and PhotoSwipe, you can create a touch-friendly product slider that retains WooCommerce’s default lightbox functionality, delivering a more engaging and intuitive user experience on your product pages.