Create Carousel after 5 elements has been added

Question

I am using jQuery UI Droppable Cart Demo plugin and I want to create a carousel or arrows once 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...

---

Till 5 Elements

---

After 5 Elements Dragged

Answer 1

You can change your 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" );
       }
   });
});