Camera Slider. Отличный слайдер для Вашего сайта

Сегодня хотелось бы поговорить об одном очень простом в использовании и интересном слайдере под названием «Camera Slider«. Нашел я его абсолютно недавно и был очень удивлен его простотой и красотой.
Несколо слов о самом слайдере.
Как и обычно Camera Slider это проект с открытым исходным кодом. Разработчики говорят о том, что в него всегда можно внести свои идеи и улучшения, написав им отдельно,  и если они окажуться приемлимы, то обязательно включат Ваши изменения в релиз новой версии слайдера. Так же разработчики слайдера отдельно отмечают что, Вы имеет право свободно им пользоваться, то есть Вы можете включить его как компонент в свой проект , который вы собираетесь продавать, вы имеете на это право. Но в таком случае разработчики слайдера спрашивают «а почему бы и не пожертовать на развитие проекта?» 🙂  Ну вобщем все как обычно 🙂

Основные понятия о работе слайдера.

Это основная структура, чтобы слайдер мог нормально работать:

<div class="camera_wrap">
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_1.jpg"></div>
    <div data-src="images/image_2.jpg"></div>
</div>

После скачивания и распаковки Camera Slider, вы можете увидеть некоторые файлы в папку с примерами работы слайдера. Естественно для работы слайдера требуется библиотека JQuery, без неее слайдер работать не будет. Как подключить библиотеку JQuery я надеюсь Вы в курсе. Так же для полноценной работы слайдера требуется мобильная библиотека JQuery Mobile. После этого можно пробовать вызывать слайдер вот таким вот способом:

jQuery('YOUR_TARGET').camera();

Camera Slider так же имеет достаточно много интересных скинов — аж 33 штуки. Все они естественно идут в комплекте.  Для того чтобы исползьовать их достаточно просто добавить один из нижеперечисленных классов в целевой элемент Вашего слайдера , то есть «YOUR_TARGET» элемент :

camera_amber_skin  |  camera_ash_skin  |  camera_azure_skin  |  camera_beige_skin  |  camera_black_skin  |  camera_blue_skin  |  camera_brown_skin  |  camera_burgundy_skin  |  camera_charcoal_skin  |  camera_chocolate_skin  |  camera_coffee_skin  |  camera_cyan_skin  |  camera_fuchsia_skin  |  camera_gold_skin  |  camera_green_skin  |  camera_grey_skin  |  camera_indigo_skin  |  camera_khaki_skin  |  camera_lime_skin  |  camera_magenta_skin  |  camera_maroon_skin  |  camera_orange_skin  |  camera_olive_skin  |  camera_pink_skin  |  camera_pistachio_skin  |  camera_pink_skin  |  camera_red_skin  |  camera_tangerine_skin  |  camera_turquoise_skin  |  camera_violet_skin  |  camera_white_skin  |  camera_yellow_skin

Далее перечисленны основные методы JS, которые могут работать:

jQuery('YOUR_TARGET').camera(); // базовый метод
jQuery('YOUR_TARGET').camera({ //базовый метод с параметрами, которые можно менять. Подробнее о всех доступных параметрах ниже
height: '41%',
pagination: false,
thumbnails: true
});

Вы можете использовать  публичные методы которые перечислены ниже, для различных инстансов.  Они просто добавляют или убирают требуемый класс к целевому элементу, который Вы выбираете:

jQuery('YOUR_TARGET').cameraStop(); //остановить слайд шоу
jQuery('YOUR_TARGET').cameraPlay(); //запустить слайдшоу
jQuery('YOUR_TARGET').cameraPause(); //поставить на паузу слайдшоу
jQuery('YOUR_TARGET').cameraResume(); //продолжение слайдшоу после паузы

 

Полный набор опций доступных для передачи в слайдер вы можете ознакомиться на официальном сайте проекта http://www.pixedelic.com/plugins/camera/

Там же можно и посмотреть демонстрационную работу данного слайдера
БАЗОВЫЙ СЛАЙДЕР http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/demo/basic.htm
ФИЧИ http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/demo/features.htm
ФУЛСКРИН http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/demo/fullscreen.htm

 

Оставьте комментарий

%d такие блоггеры, как: