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();
});

Answer 2

swiper 幻灯片继承了它们的 swiper 包装样式，如下面的代码。

<div class="swiper-wrapper" style="display:none" >
  <div class="swiper-slide" style="display:none" > // this style is inherited from paret while initing swiper
  </div>
</div>

首先使用隐藏在 echange 中的可见性而不显示任何内容。 您可以使用两种解决方案 第一：

$('.swiper-container-class').find('swiper-slide').css('visibility','visible');

这样所有子元素也将可见。

第二次使用css：

.swiper-slides{ visibility: inherit !important; }

对于动画，您可以使用不透明度。