CODEWITHSUNDEEP
javascriptjquerycaroufredsel
tjcss
tjcss

Reputation: 860

CarouFredSel - turn off infinite scrolling?

I have a horizontal scrolling carousel:

    _gotoNext: function (that) {

        //tjobbe - put funciton here to check if there is anything else after the last slide, then stop / disable the gotonext. must only scroll one if only one is available (or 2). same for go to prev
        that.$element.find('.mediaCarousel').trigger("next", false);
    },

    //This method tells the mediaCarousel to go to the previous slide.
    _gotoPrev: function(that, callback) {
        that.$element.find('.mediaCarousel').trigger("prev", false);
    },

http://jsfiddle.net/YVCTx/

I need it to STOP or at least disable the next button when it gets to the last item. If there is an un-even number I also need it to only scroll one or two items, or let it do the full three.

My current code doesn't seem to be paying attention to the built in "infinite: true (or false)" option.

For example, I have 7 items at the moment, and I scroll 3 at a time. I'd like to stop at the third scroll, so that the second scroll only goes as for as the items in the list.

Any ideas if this is possible?

Upvotes: 0

Views: 5397

Answers (1)

James Hibbard
James Hibbard

Reputation: 17765

It seems that there is a circular and an infinite option which you can set.

I would imagine one of those would do what you want (most probably the infinite one):

$('#carousel').carouFredSel({
    circular: true,         // Determines whether the carousel should be circular.
    infinite: true,         // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.
    responsive: false,      // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.
    direction: "left",      // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".
    width: null,            // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)
    height: null,           // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)
    align: "center",        // Whether and how to align the items inside a fixed width/height. Possible values: "center", "left", "right" or false.
    padding: null,          // Padding around the carousel (top, right, bottom and left). For example: [10, 20, 30, 40] (top, right, bottom, left) or [0, 50] (top/bottom, left/right).
    synchronise: null,      // Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]
    cookie: false,          // Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed. Can be a string to set a specific name for the cookie to prevent multiple carousels from using the same cookie.
    onCreate: null          // Function that will be called after the carousel has been created. Receives a map of all data.
});

Source: documentation

Upvotes: 2

Related Questions