Create a carousel after adding 5 items

Question

I am using jQuery UI Droppable Cart Demo plugin and I want to create a carousel or arrows when the Dropped area reaches 5 elements ... If I click on Arrows, remaning should show

---

Fiddle

---

HTML

<div id="products"> <h2>Drag</h2> <div id="catalog"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> </div> </div> <div id="cart"> <h2>Drop Here...</h2> <div class="ui-widget-content"> <ol> <li class="placeholder">Add your items here</li> </ol> </div> </div> 

JQuery

 $(function() { $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); } }).sortable({ items: "li:not(.placeholder)", sort: function() { $( this ).removeClass( "ui-state-default" ); } }); }); 

Screenshots ...

---

Up to 5 elements

---

After 5 items are dragged

Answer 1

You can change the jQuery function to this:

 $(function() { $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this ); if($('.ui-droppable li').length > 5) { //bind your carousel here } } }).sortable({ items: "li:not(.placeholder)", sort: function() { $( this ).removeClass( "ui-state-default" ); } }); });