Handling case where number of items < visible

[kdonald]

I have a case where it's possible no objects exist for populating carousel items initially, and the number of items can change dynamically over time. More specifically, my users are viewing a slideshow of upcoming events in their area--there could be 0 events, and events can be added and removed in real-time dynamically without the page being refreshed.

My visible is always 1. If the number of items is 0 I get a JavaScript error: "Uncaught TypeError: Cannot call method 'get' of undefined" on "if ( data.lastPage[i].get(0) === page[i].get(0) ) { ..."

I imagine I can handle this case by replacing the carousel with something else when there are no items to display; however I figured this was worth reporting. It'd be nice if the carousel didn't generate a JS error in this case.

[ryrych]

Thanks for reporting! I’ll add this to my TODO. But when (or if) the new version is released, I don’t know…

[ryrych]

Hm, I’ve been thinking about it for a while, but am not sure how to approach it. If items < visible carousel won’t work. It could fail silently, or? What do you suggest? Could you come up with a solution that would cover more cases? Consider the example where you have 5 visible elements out of 15, step = 5. How the carousel should handle the case when you removed 5 of them? Should it continue to work with fake, predefined elements? Or fail as if nothing happened?

Or it would be better to give an access to the element, and replace the DOM? What do you think?

[ryrych]

Nah, the example I gave is wrong.

[kdonald]

Hi there,

I created an example project that illustrates the rcarousel issues I need to workaround: https://github.com/kdonald/carousel.

See the README for instructions on how to run the example. The "Issues" section describes each issue in more detail. If you keep your JavaScript console open while playing around with the sample you'll see rcarousel errors when removing items dynamically.

[ryrych]

Hi, I’ve just ran it but will take a look at it over weekend. Let me tell you that the version I’m working on now will support removing of elements. It’s on my TODO list. I will get in touch with you when the beta is released.

Thanks for taking your time!

[hlaranex]

I made the following changes to solve the "Not enough elements"-Problem I added in the _addElement-Funktion:

if ( jQueryElement == undefined ){
   return false;
}

And in the "_islastPage"-Funktion within the for-loop

if (data.lastPage[i] == undefined ){
    return true;
}

And then you have to disable the Next- and the Prev-Button..

[ghost]

I ran into this problem today and hammered at it for a while without any luck. Then after reading this thread, I tried the following and it works great:

setAlbumCarousel(items.length);

function setAlbumCarousel(count) { $( ".albumCarousel .carousel" ).rcarousel({ visible: count, step: count, width: 58, height: 58, speed: 1000, margin: 4, orientation: "horizontal", auto: { enabled: false, direction: "next", interval: 5000 }, startAtPage: 0, navigation: { next: ".ui-carousel-next", prev: ".ui-carousel-prev" } });

    $( ".ui-carousel-next" )
        .add( ".ui-carousel-prev" )
        .hover(
            function() { $( this ).css( "opacity", 0.7 ); },
            function() { $( this ).css( "opacity", 1.0 ); }
        );
    $('.ui-carousel').width('620').height('60');
}