I have a dynamic carousel. in which item varies from 2 to 14.

Now if i have 2 items, then i want to show as soon as i load the carousel the right arrow disabled. How wud i show it on loading the carousel itself.

Below is the code to handle the carousel arrows.

1. function filterArrowButtonWasClicked(event) {
2. var content = $('carousel_content');
3. var offset = parseInt(content.readAttribute('data-offset'), 10);
4. var no_of_products = parseInt(ACProductBrowser.products.products.length, 10);
5. var remainingProducts = Math.floor(no_of_products % 6);
6. var totalWidth = 138.5 * remainingProducts;
7. var slideTo = totalWidth + 830;
8. 
   
9. var initialWidth = 830;
10. if (no_of_products <= 6 || no_of_products < 12 ) {
11. initialWidth = totalWidth;
12. slideTo = totalWidth;
13. } else {
14. initialWidth = 830;
15. }
16. 
    
17. if (event.target.id == 'right_arrow') {
18. $('left_arrow').removeClassName('disabled');
19. offset = Math.max(offset - initialWidth, -slideTo);
20. if (offset == -slideTo) {
21. $('right_arrow').addClassName('disabled');
22. }
23. } else {
24. $('right_arrow').removeClassName('disabled');
25. offset = Math.min(offset + initialWidth, 0);
26. if (offset == 0) {
27. $('left_arrow').addClassName('disabled');
28. }
29. }
30. 
    
31. content.writeAttribute('data-offset', offset);
32. content.style.webkitTransform = 'translateX(' + offset + 'px)';
33. content.style.MozTransform = 'translateX(' + offset + 'px)';
34. content.style.OTransform = 'translateX(' + offset + 'px)';
35. content.style.msTransform = 'translateX(' + offset + 'px)';
36. content.style.left = offset + 'px';
37. }

But this function will be called only when i click any arrow. in case of two items, the arrows shud be disabled right away. how to do this?