Слайдер Revolver является идеальным решением для тех, кто хочет выделится. Изображения поворачиваются полукругом, что создает эффект барабан револьвера.
Слайдер использует свойства CSS3 transform, также HTML5 Canvas для создания маленькой копии большого слайда. Слайдер будет работать в любом браузере.
Вы можете использовать столько изображений, сколько посчитаете нужным. А теперь об использовании:
Подключаем файлы
<link href="css/style2.css" rel="stylesheet" type="text/css" /> <script src="js/functions.js"></script>
HTML разметка будет выглядеть следующим образом
<div class="revolverSlider">
<div class="imgDivBU" id="-10" style="background-image:url(images/revolver_template_1.jpg);">
<div class="titleText tMargin">Revolver Slider</div>
<div class="subText stMargin">The first of its kind!</div>
</div>
<div class="imgDivBU" id="15" style="background-image:url(images/revolver_template_2.jpg);">
<div class="titleText tMargin">Simple Setup</div>
<div class="subText stMargin">Includes instructions & templates</div>
</div>
<div class="imgDivBU" id="15" style="background-image:url(images/revolver_template_3.jpg);">
<div class="titleText tMargin">Compatiblity in mind</div>
<div class="subText stMargin">Works in all modern browsers</div>
</div>
<div class="imgDivBU" style="background-image:url(images/revolver_template_4.jpg);">
<div class="titleText tMargin">Fully Customizable</div>
</div>
<div class="imgDivBU" style="background-image:url(images/revolver_template_5.jpg);">
<div class="titleText tMargin">No Coding Required</div>
</div>
<div class="imgDivBU" style="background-image:url(images/revolver_template_6.jpg);">
</div>
</div>
Т.е. основополагающий класс будет revolverSlider, его и необходимо использовать как обертку. Файлы style2.css и function.js содержат в себе базовый стили слайдера и сценарий обработки соответственно.
Исходные файлы плагина слайдера для сайта jQuery можно скачать по ссылке ниже.
