Динамическое присвоение класса по порядку

[Арсений JustPuk]

Есть карусель и необходимо что-бы каждый элемент динамически получал класс, при каждой прокрутке класс в порядке следования не менялся а вот элементы менялись.

<div class="carousel-block cs1"><img src="images/1.jpg" alt="" /></div>
          <div class="carousel-block cs2"><img src="images/2.jpg" alt="" /></div>
          <div class="carousel-block cs3"><img src="images/3.jpg" alt="" /></div>

Такая во разметка. Классы CS1...CSn являются присвоенными через JS, при смене элементов они не должны меняться в порядке следования:

<div class="carousel-block cs1"><img src="images/2.jpg" alt="" /></div>
          <div class="carousel-block cs2"><img src="images/3.jpg" alt="" /></div>
          <div class="carousel-block cs3"><img src="images/1.jpg" alt="" /></div>

Порядок картинок сменился, порядок классов CS1...CSn нет. Очень прошу помочь в решении этой проблемы

[krasovsky]

У тебя карусель какая? типо roundabout или типо bxslider ?
например создавай массив и количества слайдов:
var arr = new Array();
var len = $('.carousel-block').lenght;
for (i=0;i<len;i++){
arr.push(i)//я присваиваю просто номера,ты можешь что то другое,например свои элементы arr.push($('.carousel-block').eq(i))
}
arr = arr.concat(arr)//конкатинация массива - тем самым мы сможем пройтись циклом потом,когда будем расставлять классы
var currentSlide = 4;//слайд от которого будем расставлять классы, у меня просто 4, ты воспользуешься api своей карусели что бы узнать ключевой слайд
for (i=currentSlide;i<len;i++){
$('.carousel-block').eq(len[i]).addClass('cs'+i);// расставляем классы
}
Попробуй

[Арсений JustPuk]

Не получается. Юзал форум, пробовал книги читать, но в толк взять не могу.
Подскажи что и куда вставить надо, если можно с описанием, что бы в толк взять и в следующий раз не обращаться
Вот код карусели:

$(".carousel-button-right").live('click',function(){ 
   right_carusel();
});
   
$(".carousel-button-left").live('click',function(){ 
   left_carusel();
});
function left_carusel(){
   var block_width = $('.carousel-block').width() + 20;
   $(".carousel-items .carousel-block").eq(-1).clone().prependTo(".carousel-items"); 
   $(".carousel-items").css({"left":"-"+block_width+"px"}); 
   $(".carousel-items").animate({left: "0px"}, 200); 
   $(".carousel-items .carousel-block").eq(-1).remove(); 
}
function right_carusel(){
   var block_width = $('.carousel-block').width() + 20;
   $(".carousel-items").animate({left: "-"+ block_width +"px"}, 200); 
   setTimeout(function () { 
      $(".carousel-items .carousel-block").eq(0).clone().appendTo(".carousel-items"); 
      $(".carousel-items .carousel-block").eq(0).remove(); 
      $(".carousel-items").css({"left":"0px"}); 
   }, 300);
}

Так выглядит HTML

<div class="carousel"> 
   
      <div class="carousel-button-left"><a href="javascript:void(0);">&nbsp;</a></div> 
      <div class="carousel-button-right"><a href="javascript:void(0);">&nbsp;</a></div> 
      
      
      <div class="shadow-block" style="padding-left:0px;">
         <div class="t"><div class="b"><div class="m"><div class="m">
         <div class="t"><div class="t"><div class="b"><div class="b">
            <div class="carousel-wrapper"> 
               <div class="carousel-items"> 
               
                  <div class="carousel-block">
                        <img src="images/1.jpg" alt="" />
                  </div>
                  
                  <div class="carousel-block">
                        <img src="images/2.jpg" alt="" />
                  </div>
                 
                  <div class="carousel-block">
                        <img src="images/3.jpg" alt="" />cfefef
                  </div>
                  
                  <div class="carousel-block">
                        <img src="images/4.jpg" alt="" />
                  </div>
                  <div class="carousel-block">
                        <img src="images/5.jpg" alt="" />
                  </div>
                  <div class="carousel-block">
                        <img src="images/6.jpg" alt="" />
                  </div>
                  <div class="carousel-block">
                        <img src="images/7.jpg" alt="" />
                  </div>            
                  <div class="carousel-block"> 
                        <img src="images/8.jpg" alt="" />
                  </div>
                  
               </div>
            </div>
         </div></div>
         </div></div></div>
         </div></div></div>
      </div>   
   </div>

[krasovsky]

Судя по коду не видать что пробовал. Я кстати и не писал решение которое избавит тебя от всех проблем

function myfunc() {

var arr = new Array();
var len = $('.carousel-block').lenght;
for (i=0;i<len;i++){
arr.push(i)
}
arr = arr.concat(arr);
var currentSlide = 4;//ТУТ Я ЕЩЕ РАЗ ПОВТОРЮСЬ вместо 4 нужно использовать api карусельки название которой видимо большая тайна
for (i=currentSlide;i<len;i++){
$('.carousel-block').eq(arr[i]).addClass('cs'+i);
}
}


$(".carousel-button-right").live('click',function(){
   right_carusel();
myfunc()
});
$(".carousel-button-left").live('click',function(){
   left_carusel();
myfunc()
});

[Арсений JustPuk]

Если бы я знал название я бы сказал, если бы я не пробовал я бы не писал. Пробовал и так и эдак но не выходило.Попробую еще... API карусели такая же тайна как и её название, не только для тебя