幻灯片显示/隐藏后，iDangero.us刷卡更新功能不起作用
幻灯片显示/隐藏后，iDangero.us刷卡更新功能不起作用
提问于 2018-03-16 17:57:25
我需要一些关于Swiper的帮助。根据它的文档：http://idangero.us/swiper/api/，在我手动隐藏/显示幻灯片之后，我需要调用mySwiper.update()。但它在我的情况下并不总是有效的。
我已经搜索了这个问题，但只找到了以下解决方案，这些解决方案本应但由于某些原因不起作用：
- mySwiper.update()正如我提到的before
- 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()，这样幻灯片的位置就会更新，因为当幻灯片被过滤(隐藏/显示)时，剩下的幻灯片就会错位显示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49317780
复制相关文章
相似问题