当我在同一页面上有多个swiper画廊时,与分页冲突

时间:2020-07-24 14:52:36

标签: javascript swiper

我与多个Swiper画廊发生冲突。我在同一页面上有swiper1,galleryThumbs和galleryTop。 Gallery swiper1有两个元素,但是在分页时要添加galleryThumbs和galleryTop元素。因此swiper1的分页中有16个元素,而不是2个。您认为我该如何解决?感谢您的帮助。

var swiper1 = new Swiper ('.swiper-container', {
    speed: 1000,
    loop: true,
    observer:true,
    observeParents:true,
    autoplay: {
        delay: 4000,
        waitForTransition: true,
        disableOnInteraction: false,
    },
    // Pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true,            
      },
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  })

  var galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    slidesPerView: 4,
    loop: true,
    freeMode: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    loopFillGroupWithBlank: false
  });
  var galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    loop:true,
    observer:true,
    observeParents:true,
    thumbs: {
      swiper: galleryThumbs,
    },
    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
  });

0 个答案:

没有答案
相关问题