jsor / jcarousel

Riding carousels with jQuery.
https://sorgalla.com/jcarousel/
MIT License
1.99k stars 734 forks source link

Issues with pagination and autoscroll #750

Closed cbott3 closed 9 years ago

cbott3 commented 9 years ago

I too am having some issues with getting autoscroll and pagination to work properly. I am trying to use in vertical mode and have wrap set to circular. I can't get autoscroll to work at all, and am having inconsistencies with the pagination. Sometimes it works and other times it doesn't work; also at times the image shown as being selected via the pagination dots is out of sync with the image actually being shown.

I have put a test case in dropbox: https://www.dropbox.com/sh/2mevwmdwcmj95z0/AADWRyQRxVdKmLzARW1zRJiMa?dl=0

jsor commented 9 years ago

The initialization of the autoscroll plugin is outside of the document ready callback ($(function() { // ... });). Move it inside and it will work.

cbott3 commented 9 years ago

I believe I made the change you suggested (to my jcarousel.basic.modified.js) , but it is still not working properly. Running in Chrome - when it first starts, the pagination dot is showing in top dot, image one is showing. Then pagination dot quickly moves to 2nd dot from top, image one is still showing. If I click other pagination dots or use the arrows, the image remains at one and still no autoscroll. However, once I make it back to pagination dot one, autoscroll starts, and the images start moving, but they are out of sync with dots. In IE 11, the pagination dots don't show at all and the arrows don't cause scrolling. Firefox seems to work similarly to Chrome.

jsor commented 9 years ago

Since you have a vertical carousel, you have to adjust your css.

.jcarousel {
    /* ... */
    width: 1013px;
    height: 401px;
}

.jcarousel ul {
    height: 20000em;
    /* ... */
}

You need to set width and height for the root element and change width to height for the list element.

cbott3 commented 9 years ago

Thank you so much for your help! I was able to get carousel to work as desired in my application.