JavaScript Materialize Carousel: mouseenter und mouseleave

raven16 · 9. März 2018

Hallo,

auf meinem Template habe ich zukünftig mehrere Bildslider, die dann in etwa so aussehen:

Ich möchte daher mal nachfragen, wie ich in JavaScript am besten jeden Slider für sich selbst anhalten kann, wenn ich auf dem jeweiligen Slider mit der Maus drüber fahre. Bisher habe ich es nur so hinbekommen, dass bei einem Mouseenter auf einem Slider alle Slider auf meiner Seite anhalten.

Code:

    $('.carousel-gallery').carousel({fullWidth: true, duration: 400});

    var isPaused = false,
        isHovered = false;
    var t = window.setInterval(function() {
        if(!isPaused && !isHovered) {
            $(".carousel-gallery").carousel('next');
        }
    }, 5000);

    $('.carousel-gallery').on('mouseenter', function() { isHovered = true; });
    $('.carousel-gallery').on('mouseleave', function() { isHovered = false; });

    $('.carousel-nav-next').on('click', function(e) {
        e.preventDefault();
        isPaused = true;
        $('.carousel-gallery').carousel('next');
        setTimeout(function() { isPaused = false }, 3500);
    });

Für jeden Tipp wäre ich dankbar.

Ergänzung (9. März 2018)

Ich habe die Lösung des Problems anscheinend doch selbst noch gefunden:

Code:

$('.carousel-gallery').carousel({fullWidth: true, duration: 400});

    function intervalTrigger(element, timeout) {
        return window.setInterval(function() {
            if(element.data('running') == true) {
                element.carousel('next');
            }
        }, timeout);
    }
    intervalTrigger($('.carousel-gallery'), 5000);

    $('.carousel-gallery').on('mouseenter', function() {
        $(this).data('running', false);
    });
    $('.carousel-gallery').on('mouseleave', function() {
        $(this).data('running', true);
    });

    $('.carousel-nav-next').on('click', function(e) {
        e.preventDefault();
        $(this).data('running', false);
        $(this).carousel('next');
        setTimeout(function() { $(this).data('running', true); }, 3500);
    });

    $('.carousel-nav-prev').on('click', function(e) {
        e.preventDefault();
        $(this).data('running', false);
        $(this).carousel('prev');
        setTimeout(function() { $(this).data('running', true); }, 3500);
    });

Ich setze bei jedem Element über ein eigenes Data-Attribut namens data-running ein Attribut mit einem boolschen Wert und arbeite dann bei den jeweiligen Event-Handlern mit dem this-Operator

Suche

JavaScript Materialize Carousel: mouseenter und mouseleave

raven16

Lieutenant

Ähnliche Themen