Laut der Dokumentation hier: http://idangero.us/swiper/api/ muss ich mySwiper.update() aufrufen, nachdem ich Folien manuell ausgeblendet/angezeigt habe. Aber in meinem Fall funktioniert es nicht immer.
Ich habe nach diesem Problem gesucht, bin aber nur auf die folgenden Lösungen gestoßen, die aus irgendeinem Grund nicht funktionieren sollten:
- mySwiper.update() wie ich bereits erwähnt habe
- observer: true, watchParents: true beim Initialisieren von Swiper.
So initialisiere ich Swiper, da ich 2 Zeilen und 3 Spalten benötige, um Daten anzuzeigen.
Code: Select all
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,
},
});
Code: Select all
[img]./images/plu2.jpg[/img]
Default Lorem ipsum dolor sit amet.
[img]./images/plu2.jpg[/img]
Default Lorem ipsum dolor sit amet.
[img]./images/plu2.jpg[/img]
Default Lorem ipsum dolor sit amet.
Code: Select all
// '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();
});
Und falls das Problem nicht klar ist, rufe ich swiper.update() auf, damit die Folienpositionen aktualisiert werden, denn wenn die Folien gefiltert (ausgeblendet/angezeigt) werden, werden die verbleibenden Folien an ihrer Position angezeigt.
Mobile version