如何將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>