Question

我目前正在尝试使用ngx-swiper-wrapper库实现带有缩略图库的swiper。

我在原始的Swiper Demos网站上找到了我真正需要的东西： https://swiperjs.com/demos/300-thumbs-gallery.html

我试图查看此演示的代码： https://github.com/nolimits4web/Swiper/blob/master/demos/310-thumbs-gallery-loop.html

在这里，通过为原始滑动器上的“ thumbs”属性创建一个新的滑动器来分配缩略图：

 <!-- Initialize Swiper -->
  <script>
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      loop: true,
      freeMode: true,
      loopedSlides: 5, //looped slides should be the same
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      loop:true,
      loopedSlides: 5, //looped slides should be the same
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: galleryThumbs,
      },
    });
  </script>

如您所见，“ galleryThumbs”被分配给“ galleryTop.thumbs”。

但是，使用ngx-swiper-wrapper时似乎无法实现。当我这样做时，我在控制台中收到以下错误：“无法读取未定义的属性'addClass' 在Swiper.init”

它引用了swiper.js中的这一特定行： “ swiper.thumbs.swiper。$ el.addClass（swiper.params.thumbs.thumbsContainerClass）;”

这里是否有人成功在Angular应用程序中使用ngx-swiper-wrapper，并且可以与我分享一个示例？

我已经尝试过在线查找，但是我在这里发现的唯一关于stackoverflow的帖子recommends to use a different library，在我的情况下应该是最后的选择，因为我们在不同的页面上使用了多个swiper，缩略图功能。

我也尝试搜索库github问题，但作者似乎send people over here for such types of questions

是的，任何帮助将不胜感激：）

带有缩略图的ngx-swiper-wrapper swiper

0 个答案: