显示/隐藏幻灯片后,iDangero.us Swiper更新功能不起作用?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (168)

我需要Swiper的一些帮助。根据它的文档:http://idangero.us/swiper/api/,我需要在手动隐藏/显示幻灯片后调用mySwiper.update()。但它并不总是适用于我的情况。

我已经搜索了这个问题,但只是遇到了以下解决方案,但由于某些原因这些解决方案不起作用:

  1. 我之前提到的mySwiper.update()
  2. observer:true,observeParents:初始化swiper时为true。

我的jQuery代码可能有问题,但我无法弄清楚。

这是我初始化Swiper的方法,因为我需要2行和3列来显示数据。

var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        slidesPerColumn: 2,
        spaceBetween: 30,
        observer: true,
        observeParents: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      });

Swiper包装器在HTML中如下所示:

<div class="swiper-wrapper " id="plugins_list">
          <div class="swiper-slide Category1 uk-animation-slide-top-medium">
            <div class="uk-card uk-card-body">
              <div class="uk-inline uk-slider-items uk-transition-toggle">
                <img src="./images/plu2.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                  <p>Default Lorem ipsum dolor sit amet.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide Category1 uk-animation-slide-top-medium">
            <div class="uk-card uk-card-body">
              <div class="uk-inline uk-slider-items uk-transition-toggle">
                <img src="./images/plu2.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                  <p>Default Lorem ipsum dolor sit amet.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide Category2 uk-animation-slide-top-medium">
            <div class="uk-card uk-card-body">
              <div class="uk-inline uk-slider-items uk-transition-toggle">
                <img src="./images/plu2.jpg" alt="">
                <div class="uk-overlay uk-overlay-primary uk-position-bottom">
                  <p>Default Lorem ipsum dolor sit amet.</p>
                </div>
              </div>
            </div>
          </div>
</div>

这就是我想要更新包装器的方式:

// 'category1' button/tab selector
$('#category1').on('click', function() {
        $('.swiper-slide').hide();
        $('.Category1').show();
        swiper.update(true);
      });
// category2 button/tab selector 
      $('#category2').on('click', function() {
        $('.swiper-slide').hide();
        $('.Category1').show();
        swiper.update();
      });
// 'All' button/tab selector - to show all slides, this i use only to show animation that all slides were loaded, this is working fine every time with swiper update
      $('#all').on('click', function() {
        $('.swiper-slide').hide();
        $('.swiper-slide').show();
        swiper.update();
      });

有任何想法吗?或者我应该如何以不同方式显示/隐藏幻灯片?请告诉我。

如果问题不明确,我正在调用,swiper.update()以便更新幻灯片位置,因为当幻灯片被过滤(隐藏/显示)时,剩余的幻灯片将显示在位置之外。

提问于
用户回答回答于

Swiper根据所有项目保存数据swiper-column和data-swiper-row,由于某种原因忽略display:none。我的解决方案是删除所有项目,然后只插入所需项目的html(每次更改时)。我真的不知道这是否是关于内存和性能的好方法,但它确实有效。

// slides to variable
var allSlides = $(".swiper-slide"); 

// remove from DOM
$(".swiper-slide").remove();

// Generate new html
allSlides.each(function(e){ 
    $("#plugins_list").append($(this)[0].outerHTML);
});

// init swiper
var swiper = new Swiper( ... );

$('#category1').on('click', function() {
    //remove from DOM
    $(".swiper-slide").remove();

    // Generate new html, only slides we want
    allSlides.each(function(){
        if($(this).is(".Category1")) { 
            $("#plugins_list").append($(this)[0].outerHTML);
        }
    });

    //update slides
    swiper.update();
});

扫码关注云+社区

领取腾讯云代金券