开发者

How to make JCarousel Vertical Scroller reverse scroll?

I was able to instantiate a working scroller using jQuery Jcarousel however I need it to reverse scroll. For example right now I have:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 1,
        vertical: true,
       开发者_JAVA百科 scroll: 1,
        animation: "slow",
        wrap: 'last',
        initCallback: mycarousel_initCallback
    }); 
});

What do I need to do to make the items scroll upwards instead of downwards?

Thank You in advance


actually, it's more simple than that.

scroll: -1

cheers!


Reverse autoscrolling is not implemented yet although you can code it quite easily.

This is the autoscrolling function in jCarousel:

/**
 * Starts autoscrolling.
 *
 * @method auto
 * @return undefined
 * @param s {Number} Seconds to periodically autoscroll the content.
 */
    startAuto: function(s) {
        if (s != undefined)
            this.options.auto = s;

        if (this.options.auto == 0)
            return this.stopAuto();

        if (this.timer != null)
            return;

        var self = this;
        this.timer = setTimeout(function() { self.next(); }, this.options.auto * 1000);
    },

(Lines 687 to 706 in jquery.carousel.js )

Changing self.next(); to self.prev() should to the trick (can't test it right now, if you do please post the results).

Good luck :)


Just to add this to XaviEsteve answer (I can't find a place to add comment to his answer anyway).

Once I've changed self.next() to self.prev(), I have to change 'wrap' option to 'both' to make it work for me, like this.

jQuery('#mycarousel').jcarousel({
        auto: 1,
        wrap: 'both',
        vertical: true, 
        scroll: 1,
        start: 30,
        initCallback: mycarousel_initCallback
    });


Try this, it should work

$(document).ready(function() {
    $('#mycarousel').jcarousel({
      vertical: true,
      wrap: 'circular',
      animate: 'slow',
    });  
    $('#mycarousel').jcarouselAutoscroll({
      interval: 3000,
      target: '-=1', /*if you change - on + it will scroll up*/
      autostart: true
  });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜