Показать сообщение отдельно
  #1 (permalink)  
Старый 04.09.2013, 22:35
Новичок на форуме
Отправить личное сообщение для Romast Посмотреть профиль Найти все сообщения от Romast
 
Регистрация: 04.09.2013
Сообщений: 1

2 одинаковых слайда на одной странице
Есть такая простенькая карусель, но проблема в том, что мне нужно сделать несколько вызовов этой карусели на странице и понятное дело, когда я нажимаю на кнопку прокрутки - крутятся все карусели...Подскажите как сделать, что бы крутилась только та, которую я выбрал, я видел подобные решения с помощью функции this - но мои знания скрипта не позволяют мне решить мою проблему...

$(document).ready(function(){

$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
var $self = $(this);
$(".h-carousel-items").animate({left: "-155px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
$(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели
$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
}, 300);
});

$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:
var $self = $(this);
$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
$(".h-carousel-items").css({"left":"-155px"}); // устанавливаем смещение набора -222px
$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
$(".h-carousel-items .b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
});

});

Последний раз редактировалось Romast, 04.09.2013 в 22:39.
Ответить с цитированием