Не так давно я писал на этом форуме вопросы по установке плагина для jQuery - jCarousel.
На днях мне снова понадобилось встроить в приложение карусель, но получить при этом всех друзей из ВК, а их у меня около 1000. Как результат - после подключения плагина и загрузки в него друзей браузер завис секунд на 30, после чего только вывелась карусель с друзьями.
Это не очень хорошо, по-этому я решил сделать свою карусель. Идея довольно проста - по нажатии на кнопку менять позицию карусели на необходимую. Реализация несколько интереснее.
Для начала понадобится библиотека jQuery.
Затем на странице (html) необходимо создать блоки, где будет расположена сама карусель:
<div id="fr_carousel">
<div id="fr_carousel_items"></div>
</div>
Во вложенном блоке и будут размещены все друзья, а внешний служит для "обрезки" тех, кого не надо пока выводить.
Задаем свойства css:
#fr_carousel {
overflow: hidden;
width: 532px; /*Ширина зависит от того, сколько элементов будет выведено на экран. У меня это 7 элементов, помимо фото есть "рамка", общая ширина блока - 76 пикселей */
}
#fr_carousel_items {
display: inline-block;
}
В самой карусели, помимо фото друзей, у меня еще есть и рамка вокруг фотографии. Свойства для неё и, соответственно для фотографии, что бы она также заняла нужное положение:
.friends_wind {
position: relative;
left: 2px;
display: inline-block;
}
.fr_photo {
position: absolute;
top: 19px;
left: 14px
}
Теперь, собственно, при помощи javascript надо наполнить нашу карусель. Код следующий:
var fr_count;
VK.api('friends.get',{'fields':'photo'},function(fr_data) {
fr_count = fr_data.response.length; //число друзей. Пригодится
$('#fr_carousel_items').css('width',fr_count*76 + 'px'); //Длинна карусели должна быть большой - иначе элементы пойдут в "столбик"
var str = '';
for(var j = 0; j < fr_data.response.length; j++) {
str += '<div class="friends_wind"><img src="img/friends_wind.png" /><div class="fr_photo"><img src="' + fr_data.response[j].photo + '" /></div></div>';
}
$('#fr_carousel_items').html(str);
}
);
При входе в приложение буквально за несколько секунд загружает всех моих друзей *
* - в описании метода friends.get написано, что получает всех друзей сразу, а не по 1000. Не знаю правда или нет, пока нет возможности проверить
Теперь надо добавить стрелки, по нажатии на которые будет происходить движения карусели. У меня они были предоставлены дизайнером, по-этому сразу выпишу сюда:
<div id="arrow_left_1" onClick="carousel_road(0,1)">
<img src="img/arrow_left_1.png" onMouseOver="this.src='img/arrow_left_1_light.png'" onMouseOut="this.src='img/arrow_left_1.png'" />
</div>
<div id="arrow_left_2" onClick="carousel_road(0,6)">
<img src="img/arrow_left_2.png" onMouseOver="this.src='img/arrow_left_2_light.png'" onMouseOut="this.src='img/arrow_left_2.png'" />
</div>
<div id="arrow_left_3" onClick="carousel_road(0,'all')">
<img src="img/arrow_left_3.png" onMouseOver="this.src='img/arrow_left_3_light.png'" onMouseOut="this.src='img/arrow_left_3.png'" />
</div>
<div id="arrow_right_1" onClick="carousel_road(1,1)">
<img src="img/arrow_right_1.png" onMouseOver="this.src='img/arrow_right_1_light.png'" onMouseOut="this.src='img/arrow_right_1.png'" />
</div>
<div id="arrow_right_2" onClick="carousel_road(1,6)">
<img src="img/arrow_right_2.png" onMouseOver="this.src='img/arrow_right_2_light.png'" onMouseOut="this.src='img/arrow_right_2.png'" />
</div>
<div id="arrow_right_3" onClick="carousel_road(1,'all')">
<img src="img/arrow_right_3.png" onMouseOver="this.src='img/arrow_right_3_light.png'" onMouseOut="this.src='img/arrow_right_3.png'" />
</div>
Здесь сразу указано действие по нажатию кнопки - carousel_road(direction, quantity). Первый параметр отвечает за направление прокрутки карусели, а второй за количество элементов для прокрутки. 'all' - прокрутка в самый конец.
Теперь необходимо задать саму функцию в скрипте. Я сразу добавил анимацию при помощи встроенной функции jQuery - animate. Число 550, которое там встречается - это время на анимацию в миллисекундах.
function carousel_road(dir, qun) { //dir=0 - влево, 1 - вправо
var curr = parseInt($('#fr_carousel_items').css('left')); //Текущее положение карусели
if(dir === 0) {
if(qun === "all") {
$('#fr_carousel_items').animate({left: '-=' + curr},550,function(){}); //Двигаем в начало
else if(qun === 1) {
if(curr !== 0) { //Если карусель не в самом конце - её можно проматывать
$('#fr_carousel_items').animate({left: '+=76'},550,function(){});
} else {
if(qun === 6) {
if(curr <= -456) { //А это для прокрутки 6ти элементов. Если дальше для прокрутки доступно меньше - то поставим в конец
$('#fr_carousel_items').animate({left: '+=456'},550,function(){});
} else {
$('#fr_carousel_items').animate({left: '-=' + curr},750,function(){});
}
}
if(dir === 1) {
if(qun === "all")
$('#fr_carousel_items').animate({left: '-=' + (curr + fr_count*76 - 530)},550,function(){}); //Прокрутка в конец. Но должно же остаться 7 элементов, по-этому +530 - ширина карусели
else if(qun === 1) {
if(curr !== -fr_count*76 + 530) //если карусель не в конце
$('#fr_carousel_items').animate({left: '-=76'},550,function(){});
}
else if(qun === 6) {
if(curr >= -fr_count*76 + 986) //если есть 6 элементов для прокрутки
$('#fr_carousel_items').animate({left: '-=456'},750,function(){});
else
$('#fr_carousel_items').animate({left: '-=' + (curr + fr_count*76 - 530)},550,function(){}); //Иначе отправляем в конец
}
}
}
Как результат - грузится около секунды, карусель крутится не хуже, чем с использованием плагина. И при этом, если "нащелкать" на кнопки прокрутки - то будет поочередно выполнять анимацию. Можно, в принципе, делать "блокировку" кнопок при вызове функции и в animate(..,..,function(){/*вот прям тут выполняется код по окончании анимации*/}) её снимать, но я уже не стал этим заморачиваться.
Надеюсь будет полезно:)
P.S. Если будете использовать код - будьте осторожны с размерами. Их надо аккуратно пересчитывать.