Question

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

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

我之前提到的mySwiper.update（）
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，出于某种原因，它们会忽略显示：无。我的解决方案是删除所有项目，然后仅插入所需项目的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

滑动幻灯片继承了其滑动程序包装样式，如下面的代码。

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

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

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

2 个答案: