Нестандартный слайдер изображений (ромбовидный)
Нужно сделать слайдер. Изображение слайдера в прикрепленном файле. Лучше сразу посмотреть, расположение элементов нестандартное.
Описание:
0. Функционал слайдера стандартный:
а. отображение списка кликабельных ромбовидных изображений, при этом поверх изображений могут располагаться ( но не обязательно )
-- а.1 текст ( кликабельный, ссылается туда же куда и изображение )
-- а.2 иконки
б. прокрутка при помощи кнопок управления
- в. слайдер прокручивается по принципу барабана - бесконечно в обе стороны. Когда изображения заканчиваются, то они начинают повторятся с начала (или с конца, в зависимости от того в какую сторону крутим ).
1. В слайдере используются изображения в виде ромба. Это прямоугольная png-шка с прозрачностью по углам. Расположение элементов - см. прикрепленный фаил. (Если вдруг есть/найдется вариант сделать ромбики из )
2. Поверх больших и малых ромбовидных изображениях может располагаться текст - это редактируемый текс, не часть изображения.
3. Все ромбовидные изображения кликабельные ( как большие так и малые ). Текст поверх изображений тоже кликабельный. (ссылка будет в одно и то же место)
4. На больших ромбовидных изображениях (верхний угол) есть иконки - фото или видео камеры. Они должны накладываться через html/css.
5. Часть больших ромбовидных изображений затемнена (с правой стороны) - это маска, которую нужно наложить через html и css.
Слайдер, по примеру которого должен работать текущий слайдер, находится тут http://funnelbox.com (второй слайдер сверху).
То есть, по нажатию кнопки "влево" или "вправо" элементы слайдера перемещаются с анимацией подобно слайдеру с funnelbox.com.
Требования:
- Слайдер нужно сделать как плагин для jQuery
- должны быть стили CSS к плагину в отдельном файле (именоваение стилей и т.п. - любое, на выбор. можно что-то типа diamond-slider * )
Поддерживаемые браузеры:
- все нормальные основные версии хромо-лисы
- IE8+
+ нужен пример использования внутри дива.