如何将Photoswipe和Swiper集成在一起？

Question

因此，我一直在尝试找出同时使用这两个库的最佳方法，但是我一直很艰难。

我发现的最好的东西就是这个CodePen（ https://codepen.io/ezra_siton/pen/XNpJaX ），但是它看起来异常复杂，我个人无法将其用于我自己的项目。 特别是功能；

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.
}

我也在使用VueJS，但我认为这真的没有什么不同。

我想要发生的就是说我有一个6张图像的轮播（每个“页面”上3张）。 我想要这样，如果您在Photoswipe中单击第三个图像，它也会转到第三个图像，然后如果您转到灯箱画廊内的第四个图像，它也会使轮播也转到下一个页面背景是否合理。

理想情况下，我想在native / es6 JS中完成所有操作，并且希望避免像JQuery这样的依赖项。

Answer 1

您提供的代码笔正好需要完成此操作，并在那里进行了详细说明。 您提到的功能实际上是photoswipe 入门页面上的基本设置，并进行了一些修改，以使swiper索引在关闭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);
    });

除此之外，没有任何其他东西可以独立设置笔刷和照片擦拭。 只需按照每个脚本的正常说明进行操作，并确保正确构造html（就像在笔中一样），因为这可以使它们一起工作：

<!-- 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>