richardscarrott / jquery-ui-carousel

jQuery RS Carousel is a responsive and touch-enabled carousel written on top of jQuery and the jQuery UI Widget Factory providing a full and familiar API in less than 2.6kB minified and gzipped.
http://richardscarrott.github.io/jquery-ui-carousel/
192 stars 56 forks source link

goToItem no longer exists #14

Closed itay closed 11 years ago

itay commented 12 years ago

It seems that in the new version, you took out:

goToItem .carousel('goToItem', item, [animate])

Is there any way to get it back? I implemented it myself by finding out which page an item is going to be in (by get number of pages and divided the item number), and that works. However, the problem is that if the page is already visible (due to how paging works), it might cause a scroll even though the item is completely visible. Any way to fix that behavior (i.e. only scroll if the item is not completely visible)?

Thanks!

richardscarrott commented 12 years ago

I've added goToItem back in with the same signature:

.carousel('goToItem', item, [animate]) // where item can be a $obj, DOM element or 1 based number

It will only scroll to the item if it isn't fully visible. The only exception to this is when the itemsPerTransition is less than the itemsPerPage, in which case it'll scroll to the respective page.

Hope this helps.

itay commented 12 years ago

Awesome - I'll give it a shot, thank you!

itay commented 12 years ago

I made a slight tweak such that the same logic will happen in reverse as well:

Say you have 23 items, with 11 items per transition - if you are on the last page (page 3), then if you "go to" any other item less than 23 (which is all of them except the last one), then you will cause a transition to happen even though it may be completely visible. The below code fixes the issue:

    // item can be $obj, element or 1 based index
    goToItem: function (index, animate) {

        // assume element or jQuery obj
        if (typeof index !== 'number') {
            index = this.elements.items.index(index) + 1;
        }

        if (index <= this.getNoOfItems()) {
            var inverse =  this.getNoOfItems() - index;
            var inverseTransition = inverse < this.getItemsPerTransition();
            if (this.page === this.getPages().length && inverseTransition) {
                // Do nothing
            }
            else {
                this.goToPage(Math.ceil(index / this.getItemsPerTransition()), animate);
            }
        }

        return;
    }

I can make a pull request if you'd like, but thought we'd discuss it first.

itay commented 12 years ago

Richard, have you had a chance to consider this?

Itay

richardscarrott commented 12 years ago

Not had a chance to take a proper look just yet, it's on my list though.

richardscarrott commented 11 years ago

Apologies for the delay here, I've finally found some time to work on the carousel which has just seen update to 0.10.7 - https://github.com/richardscarrott/jquery-ui-carousel/tree/0.10.7

The pages are now represented differently internally which means I won't be able to port over your code however the new release does include a goToItem method so I'm going to consider this ticket closed.

Cheers.