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.

jquery-ui-carousel's Issues

startAt only works if continuous is true

startAt only works if continuous is set to true, otherwise it will start at page 1.

Chrome displays items in incorrect order when using the continuous extension

When there's over 10 items visible on one page and using the continuous extension the item order is incorrect when going from page 1 to the last page in Chrome and Safari.

Caused by sorting bug with disconnected nodes in Webkit which jQuery, as of version 1.9.0, is vulnerable to - http://bugs.jquery.com/ticket/13331

To fix add nodes before cloning like this:

elems.clonedBeginning = visibleItems
        // add one extra item in case it's partially visible
        .add(this.elements.items.slice(visibleItems.length).first())
            .clone()
                .addClass(cloneClass)
                .appendTo(elems.runner);

Instead of:

elems.clonedBeginning = visibleItems
        .clone()
             // add one extra item in case it's partially visible
            .add(this.elements.items.slice(visibleItems.length).first().clone())
                .addClass(cloneClass)
                .appendTo(elems.runner);

At line 79 - https://github.com/richardscarrott/jquery-ui-carousel/blob/master/js/jquery.rs.carousel-continuous.js#L79

Disabled state causes opacity to be .35

If you have the JQuery UI CSS files (for example, jquery.ui.all.css), then _checkDisabled will cause the entire carousel to go "transparent", because that is what JQuery UI sets it too. You can override it manually, but that seems unfortunate.

pagination doesn't work with ui-tabs

Hello everyone

your project realt fits my need at my project but when i was used carousel win tab content pagination didn't work at Firefox and IE.

pagination ul attaches to DOM but, li items doesn't

You can check to firebug Dom inspector

http://i.imgur.com/QGMK1.png

[feature] - Add fade extension

Changing Orientation creating multiple rows

Initial settings
{
startAt: null,
itemsPerPage: 4,
itemsPerTransition: 'auto',
noOfRows: 1,
speed: 'normal',
easing: 'swing',
pagination:false,
orientation:'horizontal',
nextPrevLinks: true
}

Mask Width is manually set using Javascript to access CSS, wide enough for 4 items (312px).

Re-orienting all carousels on page with:
$('.rs-carousel').carousel('option', 'orientation', 'vertical');
Mask height is manually set using Javascript to access CSS, wide enough for 4 items (312px).

This results in a vertical scroller that has 4 columns, and the next/prev links scroll up one 'row' at a time (4 items at a time, still).

After this,
$('.itemCategory.rs-carousel').carousel('option', 'orientation', 'horizontal'); results in a horizontal scroller with multiple rows..

Getting the index of the current page

Hi there,

I'm trying to build a 3-carousels-cascade, and controlling them with just one set of Pagination Links..
As you suggested I'm using something similar to $('.slave-carousel').carousel('goToPage', XXXXXXX);

..but I'm really struggling about recognizing the index of the current page on the Master Carousel, as to set the Slaves Carousel at the same page...

any idea ?

How to set pause to longer pause for auto scroll?

hi,
how do I set pause to longer pause for auto scroll? Where should I type the "pause" command?
Thank you.

JS error: Uncaught TypeError: Cannot read property 'left' of null

            $('.screenshot-carousel .picture-holder').carousel({
                itemsPerTransition:1,
                pagination: FALSE,
                autoScroll: TRUE
            });

http://dl.dropbox.com/u/133599/Screenshots/9did.png

Next/Previous - Don't display if one page or less

Is there a way to make this possible? I would like to hide the Next/Prev actions when I have 1 page or less....Do I do this through CSS?

Unable to insert a carousel into the page dynamically

jquery-ui-carousel appears to depend on height/width dimensions being set on both the rs-carousel-item(s) and the dynamically generated rs-carousel-mask elements at the time the carousel() is constructed. This prevents a carousel from easily being constructed against an content fragment that is inserted into the page dynamically (as the styles are not applied until the fragment is inserted into the page). I tried setting in-line styles for rs-carousel-items that specify height/width but this didn't work as the generated mask element must have a dimension as well.

It'd be nice to see documented support for more dynamic use cases; e.g. inserting a carousel component when making a ajax page transition.

Empty carousel causes null error on refresh call

We have an empty carousel list that we dynamically add elements to. We add the elements and then call refresh() so jquery ui carousel can refresh all of its internal data. However, this always fails if the carousel had no elements in the _getPos function call with this error:

this.elements.items.eq(this.itemIndex).position() is null

This is because the itemIndex is set to a negative value.

I was able to fix this by changing this line to remove the leading else so the itemIndex will always be set to 0 if it is negative:

https://github.com/richardscarrott/jquery-ui-carousel/blob/master/js/jquery.ui.carousel.js#L522

Could you make this change in the core jquery.ui.carousel?

Thanks,
Tom

[enhancement] - Add unit tests

Touch prototype tested on Android HTC Inspire

Seems to be working pretty well. Would be good to have a more full-featured demo with links in the panels, or something.

I couldn't break it on my device, so that's a good sign.

-Jacob

[enhancement] translation

thanks for your work
can you please add the ability to translate the strings ?

Proper script loading order for Touch

What's the proper order and method call for using the touch extension?

Thanks!

-Jacob

[bug] runner width for ie8 differs to ie9

info: adding items to the runner may cause round problems in different browsers

method: _setRunnerWidth

old line: return self._getItemDim() * self.getNoOfItems();

Solution:
new line: return Math.ceil(self._getItemDim() * self.getNoOfItems());

Should document order of including scripts

Should document that the order of including scripts is important otherwise it breaks!

Mousewheel

It would be great to add mouse wheel integration into this. If no one else has the opportunity I'll try and get to it, but it will take a while!

Update touch extension to work with 0.8

See tin

noOfRows support

Hey Richard,

Love the work you've done here.

I'm hoping that noOfRows is still supported in this new version. I didn't see any documentation for it.

Thanks!

-Jacob

jQuery UI Carousel Plugin - touch extension not compatible .

jQuery UI Carousel Plugin - touch extension not compatible jquery 1.8. and jquery-ui last version ?

[feature] noofrows support

This would be great if this was added back in, I'm using this on a website where I won't need a continuous plugin, so there won't be an issue. Also, how I'm pulling and grouping data doesn't allow me to use the solution from this issue: #22

[bug] Continuous extension breaks goToPage

The _isValid method is made void by the continuous extension to ensure the next and prev buttons will continue to get to _slide. This means using goToPage({any invalid number}) will cause the carousel to act as if it's doing a continuous loop (with the fake jumps).

To fix this the continuous index correction needs to be moved from the _slide method and into the prev and next methods, the fake position jump should ideally be kept in _slide and the _isValid method left alone.

Continuous not working correctly on version 0.8.5

I can't get the continuous option to work correctly on version 0.8.5.
It jumps back to the start instead of looping when you reach the end.

It works correctly with the v0.8.1 version used for the demo.

Update docs for 0.8

Demo orientation change reveals all elements

If you switch the demo to vertical, it makes the entire ul visible.

goToItem no longer exists

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!

Slide direction bug on continuous carousels with only 2 slides

When a carousel only has two slides and is set to be continuous, the slide direction is reversed.
E.g.: Clicking "next" will bring you to the next slide, but instead of sliding in from the right, it slides in from the left. See this in action on any MJ landing page.

CSS is inlined

Shouldn't the css be in a separate file called jquery.ui.carousel.css? I might have overlooked something and there might be a valid reason for keeping the css inlined but it seems more clean to have it in a separate file.

CSS instructions needed

I could not figure out what css rules are needed for a basic carousel to work.

Could you add a carousel.css file with just the rules needed for the carousel to work properly?

Move next/previous buttons.

It would be nice to decouple the next/previous buttons from the carousel.
Or at the very least, I'm having trouble moving the buttons above the gallery. Any help appreciated.

autoScroll and pause on hover(mouse out) no reset time

when autoScroll on and pause set to some value on mouse out from slider timer for pause don't reset . Can you add setting for reset pause time on 0 when mouse out from slider.
thx.

[bug] - Touch extension doesn't support the continous extension

Might be difficult to support continuous with touch but it should be simple at least to have 3dTransforms and continuous working together.

... maybe touch and hardware acceleration should be separated into different extensions?

itemsPerTransition value issue

itemsPerTransition: 'auto' (string, number)

Using the demo version as a template I attempted to configure using a string value

When passing this as a string it does not respond (and defaults) although when passing the value as a 'number' it does respond correctly

Version 0.7.4-5 not working when instantiated per instructions

Firstly, thanks for providing this excellent carousel.

Secondly, It's entirely possible I am doing something incorrect, and there isn't an issue.

However, after trying everything I can think of, including suggestions from the author via email (thank you for taking the time to reply to me), I am stumped.

I have uploaded the bare-bones carousel to:http://mackinven.com/carousel/demo.html

The only change from the official demo is that I have removed the complex script that interacts with the various form fields and allows for many configuration options to be explored.

This has been replaced with the instantiate method suggested by the carousel author:

$(document).ready(function() {
     $('#my-carousel-1').carousel({
            autoScroll: true,
            pause: 1000 // optional, defaults to 8000
        });
    });

As can be seen in the link to my modified version, parts of the carousel work, the pagination and prev/next buttons animate every 1000ms, but the carousel does not move. I have l tried adding other parameters, such as itemsPerPage, but this is not picked up by the carousel either.

As mentioned this may all be a product of my own stupidity, and I apologise if I have missed something obvious. The official demo of the current version (0.7.4-5) works very nicely, however it is not practical to implement with the myriad of configuration options available on screen.

An example 'real world' implementation from the author would be a great resource.

Many thanks,

Lachlan

Adding an element when the carousel is hidden causes an infinite loop

If you add an element to the carousel when it is hidden (either itself or one of its ancestors), then calling the 'add' function on it will cause an infinite loop (my guess is because it's trying to calculate the width).

This might be a bug in JQ-UI - not sure.

Mobile Devices... touch & swipes

Hello Richard,

Great plugin! I love it.

Not necessarily an error from your plugin, but a modification that I hope you would look into. An issue that I am having right now would be if I am accessing the carousel from an iPad, I can only swipe left/right, and not up/down to scroll the website up and down. Also, the 'li's are set as links to other pages... so if I try and click on a 'li' on an iPad, it would not bring me to the new page. Basically the 'a href' is not recognized, since the "touch event" is in place.

Can you recommend me anything where I can get around this?

Thanks, and great plugin again!

Roc.

Multiple .masks are added if nesting multiple ULs

http://twitter.com/#!/jdubcreative/status/81809792565383168

Responsive

speed [slow, normal, fast] no differents

I don't see any different in the speed options. It's not working in the demo.html.
Used browsers: IE9, FF8, and latest Chrome.

[enhancement] - Allow items to have variable sizes

Useful when vertical carousel contains text

animate is not defined

Hi there,

we got an error in Line 164 - jquery.rs.carousel-touch.js:
animate is not defined.

It doesn't throw the error if we just comment this line out. Is there something we missed? we can't find any definition of the animate variable.

You can reproduce the error if you activate the touch features on line 25 in your demo.html. We tested it on an ipad 1 and FireFox 11 (Win).

cheers,
Nik

How to move the nav and pagination to custom div

I'm struggling to see how I can move the nav and pagination bits to a custom div using the code supplied with the download. Any time i try to use the following code…

insertNextAction: function () {
        // this is === the '.rs-carousel-action-next' anchor element
        jQuery(this).prependTo('.rs-carousel');
    }

It breaks everything - probably because I don't know a) where to put this code or b) what it's doing. My jQuery function looks like this…

jQuery(document).ready(function() {
        jQuery(".rs-carousel").carousel({
            itemsPerPage: 4, // number of items to show on each page
            itemsPerTransition: 4, // number of items moved with each transition
            orientation: 'horizontal',
            pagination: true,
            nextPrevLinks: true  // whether next and prev links will be included
        });
    });

And my structure looks like this…

<div class="rs-carousel">
    <div class="most-read-pagination"></div>  
    <ul class="rs-carousel-runner">
        <li class="rs-carousel-item">1</li>
        <li class="rs-carousel-item">2</li>
        <li class="rs-carousel-item">3</li>
    </ul>
</div>

<div class="rs-carousel">
    <div class="most-read-pagination"></div>  
    <ul class="rs-carousel-runner">
        <li class="rs-carousel-item">1</li>
        <li class="rs-carousel-item">2</li>
        <li class="rs-carousel-item">3</li>
    </ul>
</div>

As I'm using multiple carousels on the same page, I need a solution that will move all of the nav/pagination bits to their respective div's - not all in the same one if that makes sense?

Thanks,

James

Fluid Width

How can I set the fluidity of the carousel so that it respects change in width of the browser window?

afterAnimate and beforeAnimate are fired when page loads

The afterAnimate and beforeAnimate functions are fired mulitple times (same as the number of slides) when page loads.

Extra dot after creating carousel?

I'm seeing a dot associated with a div I have placed inside the li items--it's taking its color from the css for "html, body". Is this generated by the carousel code? Do I need to remove the Div to fix the issue?

Should recacheItems be public?

nope

touch

I can't seem to get any of the touch functionality working on Android, is there a demo somewhere?

Continuous not working with touch plugin

Continuous not working with the touch enable. It works like loop , not like continuous.

Any suggestions how to fix this?