How to stop jcarousel immediately when you hover over a mouse and continue moving

I am trying to stop the transition with an action (in this case, hover), but I don't know how to achieve it. This is where I am doing the test:

http://lvemil.net/gla/web/

I have 3 instances jcarousel, and my goal is to stop the movement (right away) on hover. The problem is this: when the mouse is above the carousel, I stop it, but the current transition ends before it stops, and the sensation is not desirable, I want to immediately stop the movement when the mouse is over.

This is the initialization for the first carousel:

$('#jcarousel1')
.jcarousel({
    'animation': {
        'duration': 6000,    //DEFINE SPEED
        'easing':   'linear',
        'complete': function() {
        //ON ANIMATION COMPLETE ACTION GO HERE
        }
    },
    'wrap': 'circular'


}).jcarouselAutoscroll({
    interval: 1,
    target: '+=1',
    autostart: true
}).on('mouseover',function(e){
    $(this).jcarouselAutoscroll('stop');
}).on('mouseout',function(e){
    $(this).jcarouselAutoscroll('start');
});

The other two instances of jcarousel are similar to the initialized ones.

UPDATE: I already tried:

$('#jcarousel1').jcarousel('list').stop();

(), , .

1: mouseout ( )

$('#jcarousel1').jcarousel('destroy')
$('#jcarousel1').jcarousel( arrayWithInitOptions )

, (), , , .

+4
1

-

    <script type="text/javascript" src="jquery.jcarousel.min.js"></script>
    <script type="text/javascript">
    function mycarousel_initCallback(carousel)
    {
        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };

    jQ=jQuery.noConflict();
    jQ(document).ready(function() {
        jQ('#mycarousel').jcarousel({
                    auto: 3,
                    animation: 1000,
                    scroll: 1,
                    easing: "linear",
                    wrap: 'circular',
                    initCallback: mycarousel_initCallback
        });
    });

    </script>
+1

Source: https://habr.com/ru/post/1525964/


All Articles