Извинясь что созда нову тему. но никак не могу найти решение
Нажимаю на кнопку пролистываются оба слайда. Подскажите решение, пожалуйста что бы я всегда мог пользоваться:
<div class="carousel">
<div class="carousel-wrapper">
<div class="carousel-items">
<div class="carousel-block">
<img src="img/example/31.jpg" usemap="#yachtamap" alt="" />
<map name="yachtamap">
<area class="carousel-button-left" href="javascript:void(0);" coords="0,155,35,190" shape="rect" alt="кнопка влево">
<area class="carousel-button-right" href="javascript:void(0)" coords="238,155,275,188" shape="rect" alt="кнопка вправо">
</map>
</div>
<div class="carousel-block">
<img src="img/example/32.jpg" usemap="#yachtamap" alt="" />
</div>
</div>
</div>
<div class="carousel-wrapper">
<div class="carousel-items">
<div class="carousel-block">
<img src="img/example/31.jpg" usemap="#yachtamap" alt="" />
<map name="yachtamap">
<area class="carousel-button-left" href="javascript:void();" coords="0,155,35,190" shape="rect" alt="кнопка влево">
<area class="carousel-button-right" href="javascript:void()" coords="238,155,275,188" shape="rect" alt="кнопка вправо">
</map>
</div>
<div class="carousel-block">
<img src="img/example/32.jpg" usemap="#yachtamap" alt="" />
</div>
</div>
</div>
</div>
Скрипт:
$(".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);
}
CSS:
Код:
|
.carousel-wrapper {
width: 280px;
overflow: hidden;
margin-left: 71px;
position: relative;
}
.carousel-items {
width: 10000px;
position: relative;
}
.carousel-block {
float: left;
width: 275px;
padding: 10px;
} |