Problem bei fade-Effekt in Bootstrap Carousel

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich hab als Slider das Bootstrap Carousel verwendet. Heir möchte ich nun das die Bildunterschriften eingeblendet werden anstatt wie bei den Bildern geslided.
Ich verstehe nicht so ganz warum das so ein Durcheinander im fading gibt.
Javascript:
slide.bs.carousel
und
Javascript:
slid.bs.carousel
sind die beiden events für das rein und raussliden.
Siehe auch: http://getbootstrap.com/javascript/#carousel

Hier der Code dazu: http://jsbin.com/lewubi/9/edit

Ich denke mal das es was mit meinem hiding zu tun hat, komme aber irgendwie nciht zu einer Lösung.

Viele Grüße
 
Hi,

es wird die Klasse .hidden-xs verwendet, die das Element mit Hilfe von !important ausblendet. Um das zu umgehen, wirst du wohl nicht daran vorbei kommen, es programmatisch vorübergehen zu entfernen.

Hier ein Vorschlag:
Javascript:
$(function() {
    var slideInterval = 500,
        old;

    $('.carousel').carousel({
        interval: false
    })

    $('.carousel').on('slid.bs.carousel', function(evt) {
        var elem = $(evt.target).find('.active.item').find('.slidecaption');

        elem.hide();
        elem.removeClass('hidden-xs');
        elem.fadeIn(slideInterval, function() {
            old = elem;
        });
    });

    $('.carousel').on('slide.bs.carousel', function(evt) {
        if (old) {
            old.fadeOut(slideInterval, function() {
                old.addClass('hidden-xs');
            });
        }
    });
});
Ob die Klasse immer gleich heißt, kann ich jedoch nicht sagen.

Ciao
Quaese
 
Hi,
was mich jetzt etwas irritiert ist doch das die Klasse .hidden-xs erst bei kleinen Bildschirmgrößen durch die MediaQueries aktiv wird.
Das dürfte doch dann bei der Laptopansicht keine Rolle in Bezug auf das JS spielen, oder?

Grüße
 
Hi,

Ob die Klasse immer gleich heißt, kann ich jedoch nicht sagen.

Das meinte ich damit. Wie und ob die Klasse überhaupt verwendet wird, kann ich dir nicht sagen. Da musst du einfach unterschiedliche Anzeigegeräte testen oder die media-queries in Bootstrap analysieren.

Ciao
Quaese
 
Hi,
ich weiß schon wann die Klasse aktiv wird und was sie macht.
Meine Frage war ja eher warum diese Klasse Probleme machen sollte, wenn ich eine Anzeigegröße habe bei der die entsprechenden CSS-Attribute gar nicht verwendet werden?
Aber lassen wir die Klasse .hidden-xs mal aussen vor.

Jetzt aber noch eins, zwei Fragen zu deinem Scriptvorschlag. Der unterscheidet sich ja schon massiv von meinem recht einfachen bei welchem ich einfach bei entsprechendem Event das Element ein- bzw. ausgeblendet habe.

  • Warum setzt du interval in line 6 auf false?
  • Was für einen Vorteil bringt es wenn man .find hier zweimal aufruft
Javascript:
….find('.active.item').find('.slidecaption');
?
Und nicht den Selektor direkt setzt?

Also grundsätzlich will ich das der Text ein-faded und aus-faded und nicht dem Bild mit-slided, heißt der Text sollte beim Slide schon ausgefaded sein.
Ich denke ich hab etwas ein Problem damit das ich den Eventablauf, also nicht so ganz verstehe wann slid und wann slide feuert.

Tschö,
Jan
 
Zurück