幻灯片显示/隐藏后，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()，这样幻灯片的位置就会更新，因为当幻灯片被过滤(隐藏/显示)时，剩下的幻灯片就会错位显示。
回答 2
Stack Overflow用户
发布于 2018-09-03 07:15:25
Swiper基于所有项保存数据卷帘列和数据卷帘行，因为某些原因忽略了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();
});Stack Overflow用户
发布于 2020-07-11 22:07:13
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中的可见性，并显示none。您可以首先使用两种解决方案：
$('.swiper-container-class').find('swiper-slide').css('visibility','visible');这样，所有的子元素也将可见。
第二，使用css：
.swiper-slides{ visibility: inherit !important; }对于动画，可以使用不透明度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49317780
复制相关文章
相似问题
腾讯云开发者
