Problem mit slider in accordion (inkl. Lösung)
Hallo zusammen!
Ich bin für einen Kunden gerade über ein Problem mit dem Slider gestoßen, wenn dieser in ein Accordion eingebaut wird.
Beim ersten Slider war alles wunderbar, bei denen in den geschlossenen Accordion-Bereichen wurden die Bilder nicht angezeigt.
Habe dann ein bisschen gebuddelt und herausgefunden, das Swipe die Größe des Sliders nicht korrekt berechnet, wenn dieser ausgeblendet ist.
Das Problem hatte ich bei einem anderen Projekt so ähnlich auch schon einmal und die Lösung ist recht simpel: Das Element einblenden, bis die Größe bestimmt wurde und dann wieder ausblenden.
Ich habe daraufhin die "j_slider.html5" des Projekts entsprechend angepasst und es funktioniert jetzt wunderbar.
Und nun dachte ich mir, ich teile meine Lösung mal mit euch, falls noch jemand so ein Problem hat.
Kurze Zusammenfassung:
Wenn der content-slider nicht sichtbar ist, suche das erste noch sichtbaren Elternelement und suche alle versteckten Kindknoten und speichere sie zwischen.
Anschließend werden die Kindknoten eingeblendet, das Swipe-Objekt erstellt und dann die Knoten wieder ausgeblendet.
HTML-Code:
(function($) {
$(document).ready(function() {
$('.ce_sliderStart').each(function(i, cte) {
var s = $('.content-slider', cte)[0],
c = s.getAttribute('data-config').split(','),
visible = true;
if (!$(s).is(":visible")) {
visible = false;
// find first invisible parent
var fip = $(s).closest(":visible").children(":hidden");
fip.show();
}
new Swipe(s, {
// Put custom options here
'auto': parseInt(c[0]),
'speed': parseInt(c[1]),
'startSlide': parseInt(c[2]),
'continuous': parseInt(c[3]),
'menu': $('.slider-control', cte)[0]
});
if (!visible) {
fip.hide();
}
});
});
})(jQuery);
Ich hoffe es hilft.
Schöne Grüße
Andreas
