views:

1608

answers:

2

On the jCarousel plugin site there's an example on how to do a circular carousel but it's using dynamically generated content. I would like to know how one can do the exact same thing with static content.

Here's the jCarousel circular example using dynamic content:
http://sorgalla.com/projects/jcarousel/examples/special%5Fcircular.html

Also, since I'm doing this for a site that will get updated regularly, how can I prevent the previous and next buttons from showing up when there are only 3 list items to show?

A: 

That example is not using dynamic content, it's using static content. The list of images it is loading is:

var mycarousel_itemList = [
    {url: 'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg', title: 'Flower1'},
    {url: 'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg', title: 'Flower2'},
    {url: 'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg', title: 'Flower3'},
    {url: 'http://static.flickr.com/77/199481108_4359e6b971_s.jpg', title: 'Flower4'},
    {url: 'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg', title: 'Flower5'},
    {url: 'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg', title: 'Flower6'},
    {url: 'http://static.flickr.com/58/199481218_264ce20da0_s.jpg', title: 'Flower7'},
    {url: 'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg', title: 'Flower8'},
    {url: 'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg', title: 'Flower9'},
    {url: 'http://static.flickr.com/70/229228324_08223b70fa_s.jpg', title: 'Flower10'}
];

What's not working about the code on that page for you?

If you're confused by the comment:

<!-- The content will be dynamically loaded in here -->

All that means is that the carousel is started on page load by this code:

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});
Dominic Rodger
I guess what I don't get is how I can get a circular carousel when my content is not dynamically loaded. The site I'm updating is coded more like the simple carousel example: http://sorgalla.com/projects/jcarousel/examples/static_simple.htmlIt's an unordered list and each list item has a header, a descriptive paragraph and an image or two. The simple carousel works fine, but for the life of me I can't figure out how to do a circular carousel.
Can you not change the site so the content is loaded like the example on the page you linked?
Dominic Rodger
hmm... I was trying to avoid having to change the markup and javascript too much. So are you saying that a circular carousel is only possible if I load the content dynamically the way that example did it?
I think so - I ended up not using jCarousel last time I needed a circular carousel and implemented my own (see http://www.aarongriffin.co.uk/portfolio/portraits/slideshow/ for an example), because I didn't like the way jCarousel looked/worked.
Dominic Rodger
A: 

Just add wrap: 'last', in the init function to make it loop.

Jean-Michael