Thank you for your help.

My code looks like:

var CatItems = "";

for(var x=0; x < data.PRODUCTS.length; x++) {
if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
CatItems += '<div><a class="large_image" href="#"><img  src="'+ data.PRODUCTS[x].product_img +'" alt="' + data.PRODUCTS[x].product_name +'"></a><h3 class="geo_17_darkbrown">' + data.PRODUCTS[x].product_name +'</h3>';

if ( data.PRODUCTS[x].product_onsale==1 ) {
CatItems += '<img alt="sale" src="assets/images/sale.gif" class="sale"><span class="geo_17_red_linethr">&pound;'+ data.PRODUCTS[x].product_retailprice +'</span>&nbsp;&nbsp;<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>';
} else {
CatItems += '<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>';
}

if ( data.PRODUCTS[x].product_COLOURS ) {
CatItems += '<span class="colour">';

 for(var y=0; y < data.PRODUCTS[x].product_COLOURS.length; y++) {

CatItems += '<span><a href="'+ data.PRODUCTS[x].product_COLOURS[y].colours_large +'"><img src="'+ data.PRODUCTS[x].product_COLOURS[y].colours_thumb +'" alt="'+ data.PRODUCTS[x].product_COLOURS[y].colour_name +'" /></a></span>';
}

CatItems += '</span>';
}

CatItems += '</div>';

if (x % 3 === 2) CatItems += '</li>';


}

and it generates this:

<div class="carousel_00 jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">            
  <div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;">
    <ul class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 7890px;">
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress1.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <img class="sale" src="assets/images/sale.gif" alt="sale">
          <span class="geo_17_red_linethr">£120
          </span>&nbsp;&nbsp;
          <span class="price geo_17_darkbrown">£100
          </span>
          <span class="colour">
            <span>
              <a href="assets/images/colour.gif">
                <img alt="Black" src="assets/images/black.gif"></a>
            </span>
            <span>
              <a href="assets/images/colour.gif">
                <img alt="Brown" src="assets/images/brown.gif"></a>
            </span>
            <span>
              <a href="assets/images/colour.gif">
                <img alt="Purple" src="assets/images/purple.gif"></a>
            </span>
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Rachel Dress" src="assets/images/dress2.gif"></a>
          <h3 class="geo_17_darkbrown">Rachel Dress</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
      </li>
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="1">
      </li>
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress1.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress2.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
      </li>
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
      </li>
    </ul>
  </div>
  <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true">
  </div>
  <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false">
  </div>            
  <div class="jcarousel-control geo_10_darkbrown_capital">          7 products&nbsp;&nbsp;&nbsp;                  
    <a href="#">1</a>                 
    <a href="#">2</a>                 
    <a href="#">3</a>                         
    <a href="#">4</a>                 
    <a href="#">5</a>                 
    <a href="#">6</a>                 
    <a href="#" class="last">7</a>              
  </div>        
</div>

It works like it should, put every 3 div's in li. but I have another problem with divide. It divide "x" inside the loop.

For example in JS:

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">

And HTML out is:

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>

then

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>

then

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>

etc...

What I need is that count goes as 0-1-2-3-4-5-etc, but with divide it goes 0-3-6-etc and jCarousel insert blank li's 1-2, 4-5, 7-8.

How I can avoid "x" divide inside the loop?

Tnak you!