How can I integrate Photoswipe and Swiper together?

Question

So I've been trying to figure out the best way to use both of these libraries together, but I've been having a hard time.

The best thing I've found is this CodePen ( https://codepen.io/ezra_siton/pen/XNpJaX ) but it seems incredibly overcomplicated and I personally haven't been able to get it to work on my own project. Especially the function;

var initPhotoSwipeFromDOM = function(gallerySelector) {
  ... omitted this because the function is huge. This is here because 
  SO doesn't allow codepen links without a code block for some dumb reason.
}

I'm also using VueJS, but I don't think that really makes a difference.

All I want to happen is say I have a carousel of 6 images (3 on each "page"). I want it so that if you click the 3rd image, in Photoswipe it also goes to the 3rd image, and if you then go to the 4th image inside the lightbox gallery, it also makes the carousel go to the next page as well in the background if that makes sense.

I ideally want to do this all in native/es6 JS and I want to avoid dependencies like JQuery.

Answer 1

The codepen you provided is exactly how this needs to be done and it is explained well there. The function you mentioned is actually the basic setup from the photoswipe getting started page with one modification to make the swiper index match upon closing photoswipe:

    /* EXTRA CODE (NOT FROM THE CORE) - UPDATE SWIPER POSITION TO THE CURRENT ZOOM_IN IMAGE (BETTER UI) */

    // photoswipe event: Gallery unbinds events
    // (triggers before closing animation)
    gallery.listen("unbindEvents", function() {
      // This is index of current photoswipe slide
      var getCurrentIndex = gallery.getCurrentIndex();
      // Update position of the slider
      mySwiper.slideTo(getCurrentIndex, false);
    });

Other than that part there isn't anything there that is out of the norm for setting up swiper and photoswipe independently. Just follow the normal instructions for each script, and make sure to structure the html correctly like done in the pen because that is what allows them to function together:

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <ul class="swiper-wrapper my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    <!-- Slides -->
    <li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a title="click to zoom-in" href="https://picsum.photos/1200/602" itemprop="contentUrl" data-size="1200x600">
        <img src="https://picsum.photos/1200/602" itemprop="thumbnail" alt="Image description" />
      </a>
    </li>
    <li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a title="click to zoom-in" href="http://placehold.it/1200x600/AB47BC/ffffff?text=Zoom-image-2" itemprop="contentUrl" data-size="1200x600">
          <img src="http://placehold.it/600x300/AB47BC/ffffff?text=Thumbnail-image-2" itemprop="thumbnail" alt="Image description" />
        </a>
    </li>
    <li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a title="click to zoom-in" href="http://placehold.it/1200x600/EF5350/ffffff?text=Zoom-image-3" itemprop="contentUrl" data-size="1200x600">
          <img src="http://placehold.it/600x300/EF5350/ffffff?text=Thumbnail-image-3" itemprop="thumbnail" alt="Image description" />
        </a>
    </li>
    <li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a title="click to zoom-in" href="http://placehold.it/1200x600/1976D2/ffffff?text=Zoom-image-4" itemprop="contentUrl" data-size="1200x600">
          <img src="http://placehold.it/600x300/1976D2/ffffff?text=Thumbnail-image-4" itemprop="thumbnail" alt="Image description" />
        </a>
    </li>
    <li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a title="click to zoom-in" href="https://picsum.photos/1200/603" itemprop="contentUrl" data-size="1200x600">
          <img src="https://picsum.photos/1200/603" itemprop="thumbnail" alt="Image description" />
        </a>
    </li>
  </ul>