Форум Сайтостроение Веб-строительство

Как сделать слайдер в две строки?

F
На сайте с 26.02.2010
Offline
37
fayes
1601

Подскажите пожалуйста, как сделать слайдер в две строки? Вроде как код не очень сложный, но вот мои познания в js скриптах совсем скудные. Не понимая как работает скрипт пытался дублировать содержимое дива carousel-wrapper. В итоге - верхний слайдер работает, нижний глючит. Нашел в скрипте значения типа carousel-items2, carousel-block2 и т п., создал дивы с таким значением и опять ничего не получилось. На моем уровне знаний других вариантов я не вижу. :mad:

Буду очень признателен за помощь.

Вот собственно код. 

  <script type="text/javascript" src="js/carousel.js"></script>

</head>

<body>  



                          <div class="carousel-wrapper"> 

                            <div class="carousel-items"> 

                              <div class="carousel-block">                 

                                <a href="#image1" title="Увеличить"><img alt="palestra"  src="img/carousel/1b.jpg"></a>

                              </div>

                              <div class="carousel-block">                 

                                <a href="#image2" title="Увеличить"><img alt="palestra"  src="img/carousel/2b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image3" title="Увеличить"><img alt="palestra"  src="img/carousel/3b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image4" title="Увеличить"><img alt="palestra"  src="img/carousel/4b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image5" title="Увеличить"><img alt="palestra"  src="img/carousel/5b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image6" title="Увеличить"><img alt="palestra"  src="img/carousel/6b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image7" title="Увеличить"><img alt="palestra"  src="img/carousel/7b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image8" title="Увеличить"><img alt="palestra"  src="img/carousel/8b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image9" title="Увеличить"><img alt="palestra"  src="img/carousel/9b.jpg"></a>

                              </div>

                              <div class="carousel-block">  

                                <a href="#image10" title="Увеличить"><img alt="palestra"  src="img/carousel/10b.jpg"></a>

                              </div>

                             

                              </div>

                            </div>

                          </div>

                       </div>

</body>

$(".carousel-button-right").live('click',function(){ 

   right_carusel_click();

});

   

$(".carousel-button-left").live('click',function(){ 

   left_carusel();

});

function left_carusel(){

   var block_width = $('.carousel-block').width() + 0;

   $(".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(); 

}

setInterval(function right_carusel(){

   var block_width = $('.carousel-block').width() + 0;

   $(".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);

},2000);

function right_carusel_click(){

   var block_width = $('.carousel-block').width() + 0;

   $(".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);

}







$(".carousel-button-right2").live('click',function(){ 

   right_carusel_click2();

});

   

$(".carousel-button-left2").live('click',function(){ 

   left_carusel2();

});

function left_carusel2(){

   var block_width = $('.carousel-block2').width() + 0;

   $(".carousel-items2 .carousel-block2").eq(-1).clone().prependTo(".carousel-items2"); 

   $(".carousel-items2").css({"left":"-"+block_width+"px"}); 

   $(".carousel-items2").animate({left: "0px"}, 200); 

   $(".carousel-items2 .carousel-block2").eq(-1).remove(); 

}

function right_carusel2(){

   var block_width = $('.carousel-block2').width() + 0;

   $(".carousel-items2").animate({left: "-"+ block_width +"px"}, 200); 

   setTimeout(function () { 

      $(".carousel-items2 .carousel-block2").eq(0).clone().appendTo(".carousel-items2"); 

      $(".carousel-items2 .carousel-block2").eq(0).remove(); 

      $(".carousel-items2").css({"left":"0px"}); 

   }, 300);

};

function right_carusel_click2(){

   var block_width = $('.carousel-block2').width() + 0;

   $(".carousel-items2").animate({left: "-"+ block_width +"px"}, 200); 

   setTimeout(function () { 

      $(".carousel-items2 .carousel-block2").eq(0).clone().appendTo(".carousel-items2"); 

      $(".carousel-items2 .carousel-block2").eq(0).remove(); 

      $(".carousel-items2").css({"left":"0px"}); 

   }, 300);

}











$(".carousel-button-right3").live('click',function(){ 

   right_carusel_click3();

});

   

$(".carousel-button-left3").live('click',function(){ 

   left_carusel3();

});

function left_carusel3(){

   var block_width = $('.carousel-block3').width() + 20;

   $(".carousel-items3 .carousel-block3").eq(-1).clone().prependTo(".carousel-items3"); 

   $(".carousel-items3").css({"left":"-"+block_width+"px"}); 

   $(".carousel-items3").animate({left: "0px"}, 200); 

   $(".carousel-items3 .carousel-block3").eq(-1).remove(); 

}

function right_carusel3(){

   var block_width = $('.carousel-block3').width() + 20;

   $(".carousel-items3").animate({left: "-"+ block_width +"px"}, 200); 

   setTimeout(function () { 

      $(".carousel-items3 .carousel-block3").eq(0).clone().appendTo(".carousel-items3"); 

      $(".carousel-items3 .carousel-block3").eq(0).remove(); 

      $(".carousel-items3").css({"left":"0px"}); 

   }, 300);

};

function right_carusel_click3(){

   var block_width = $('.carousel-block3').width() + 20;

   $(".carousel-items3").animate({left: "-"+ block_width +"px"}, 200); 

   setTimeout(function () { 

      $(".carousel-items3 .carousel-block3").eq(0).clone().appendTo(".carousel-items3"); 

      $(".carousel-items3 .carousel-block3").eq(0).remove(); 

      $(".carousel-items3").css({"left":"0px"}); 

   }, 300);

}
дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#1

Код не оптимизирован, но работает


$(".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() + 0;
   
   $.each($('.carousel-items'), function(i, el){
	   $(el).find(".carousel-block").eq(-1).clone().prependTo($(el)); 
	   $(el).css({"left":"-"+block_width+"px"}); 
	   $(el).animate({left: "0px"}, 200); 
	   $(el).find(".carousel-block").eq(-1).remove(); 
   });
}

function right_carusel(){
	var block_width = $('.carousel-block').width() + 0;
	setTimeout(function () { 
		$.each($('.carousel-items'), function(i, el){
			$(el).find(".carousel-block").eq(0).clone().appendTo($(el)); 
			$(el).find(".carousel-block").eq(0).remove();
			$(el).css({"left":"0px"}); 
		});
	}, 300);
}

setInterval(right_carusel, 2000);
Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
F
На сайте с 26.02.2010
Offline
37
fayes
#2
дани мапов:
Код не оптимизирован, но работает 

$(".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() + 0;

   

   $.each($('.carousel-items'), function(i, el){

	   $(el).find(".carousel-block").eq(-1).clone().prependTo($(el)); 

	   $(el).css({"left":"-"+block_width+"px"}); 

	   $(el).animate({left: "0px"}, 200); 

	   $(el).find(".carousel-block").eq(-1).remove(); 

   });

}



function right_carusel(){

	var block_width = $('.carousel-block').width() + 0;

	setTimeout(function () { 

		$.each($('.carousel-items'), function(i, el){

			$(el).find(".carousel-block").eq(0).clone().appendTo($(el)); 

			$(el).find(".carousel-block").eq(0).remove();

			$(el).css({"left":"0px"}); 

		});

	}, 300);

}



setInterval(right_carusel, 2000);

О отлично, спасибо огромное. Если начну зарабатывать на сайте, обязательно отблагодарю )

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий