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

Question

我需要一些有关 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() 以便更新幻灯片位置，就像过滤幻灯片(隐藏/显示)时剩余的幻灯片一样显示位置错误。

Answer 1

Swiper 根据所有项目保存 data-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();
});