Jquery, Jcarousel smooth infinite scrolling

Question

I am using jcarousel to auto scroll some images. I would like to know how to make them scroll in one fluid scroll with no pauses or stops.

Currently there is a pause and then it scrolls again. If I am not making myself clear then ask and I will try to explain a little better.

This is the code:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 1,
        wrap: 'last',
        vertical: true,
        animation: 5000

    });

My jQuery plugin, simplyScroll should achieve what you want http://logicbox.net/jquery/simplyscroll/ — Logicbox, Sep 02 '11 at 16:33

score 7 · Accepted Answer · answered Mar 14 '10 at 15:59

7

try

auto: .01

you have it set to autoscroll every 1 second. I don't think a fluid scroll is possible, but this should look just about the same.

answered Mar 14 '10 at 15:59

carillonator

4,715
3
29
39

Thanks for that. Decide do it an easy way and use the jquery animate function. – Mar 14 '10 at 16:09
This worked for me in addition to setting animation speed to a higher value (than the default). Like so: `animation: 5000, auto: 0.01` – racl101 Sep 07 '12 at 15:15

score 6 · Answer 2 · answered Jan 20 '15 at 17:56

6

This questions is as old as dirt, but I figured I give the updated solution.

$('.jcarousel').jcarousel({
    wrap: 'circular',
    animation: {
        duration: 3000,
        easing:   'linear',
    }
  });
  $('.jcarousel').jcarouselAutoscroll({
      interval: 0
  });

answered Jan 20 '15 at 17:56

Jake

383
6
26

1

Best answer of them all. – egr103 Feb 02 '15 at 10:10
Works for me too, but what if I want to directly jump to a picture without the transition? Your solution does actually "disable" the pagination's function... – flaudre Mar 07 '16 at 07:54

score 2 · Answer 3 · answered Mar 20 '11 at 08:29

2

To me it scrolls "smoother" when used linear easing instead of swing.

auto:   .01,
easing: 'linear'

answered Mar 20 '11 at 08:29

Mushegh A.

1,431
12
18

`jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 0.1, scroll: 10, wrap: 'circular', animation: 10000, easing: 'linear' }); });` - easing made all the difference – TomDunning Sep 26 '12 at 12:11

score 0 · Answer 4 · edited Mar 01 '13 at 11:59

Open jquery.jcarousel.min.js
Beautify the script using http://jsbeautifier.org
find and replace "this.options.auto * 1E3" with "0" (zero)

Something like:

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

jQuery(document).ready(function() {

    jQuery('#mycarousel').jcarousel({
        auto:   1,
        animation:2000,
        easing: 'linear',
        wrap: 'circular',
        scroll:1,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        initCallback: mycarousel_initCallback
    });
});

thats all. :)

Jquery, Jcarousel smooth infinite scrolling

4 Answers4