На днях мне снова понадобилось встроить в приложение карусель, но получить при этом всех друзей из ВК, а их у меня около 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}
Код: Выделить всё
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>
Теперь необходимо задать саму функцию в скрипте. Я сразу добавил анимацию при помощи встроенной функции 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(){}); //Иначе отправляем в конец } }}
Надеюсь будет полезно:)
P.S. Если будете использовать код - будьте осторожны с размерами. Их надо аккуратно пересчитывать.