JavaScript Materialize Carousel: mouseenter und mouseleave

raven16

Lieutenant
Dabei seit
Nov. 2008
Beiträge
580
#1
Hallo,

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

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 ()

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
 
Top