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

【问题标题】：How can I integrate Photoswipe and Swiper together?如何将 Photoswipe 和 Swiper 集成在一起？
【发布时间】：2019-03-01 13:18:01
【问题描述】：

所以我一直在尝试找出同时使用这两个库的最佳方式，但我一直很难。

我发现的最好的东西是这个 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 这样的依赖项。

【问题讨论】：

标签： javascript swiper photoswipe

【解决方案1】：

您提供的codepen 正是需要这样做的，并且在那里进行了很好的解释。您提到的功能实际上是 photoswipe getting started 页面的基本设置，并进行了一项修改，以在关闭 photoswipe 时使 swiper 索引匹配：

    /* 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);
    });

除了那部分之外，没有任何东西超出了独立设置 swiper 和 photoswipe 的规范。只需按照每个脚本的常规说明进行操作，并确保像在钢笔中那样正确地构建 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>

【讨论】：