Revolver — jQuery слайдер с интересным эффектом перелистывания

16.02.2017 weatherless JavaScript » jQuery » #413

Смотреть

Слайдер Revolver является идеальным решением для тех, кто хочет выделится. Изображения поворачиваются полукругом, что создает эффект барабан револьвера.

Слайдер использует свойства ~~CSS3 transform~~, также ~~HTML5 Canvas~~ для создания маленькой копии большого слайда. Слайдер будет работать в любом браузере.

Вы можете использовать столько изображений, сколько посчитаете нужным. А теперь об использовании:

Подключаем файлы

<link href="css/style2.css" rel="stylesheet" type="text/css" />
<script src="js/functions.js"></script>

1 2	<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>

<div class="titleText tMargin">Revolver Slider</div>

<div class="subText stMargin">The first of its kind!</div>

</div>

<div class="titleText tMargin">Simple Setup</div>

<div class="subText stMargin">Includes instructions & templates</div>

</div>

<div class="titleText tMargin">Compatiblity in mind</div>

<div class="subText stMargin">Works in all modern browsers</div>

</div>

<div class="titleText tMargin">Fully Customizable</div>

</div>

<div class="titleText tMargin">No Coding Required</div>

</div>

</div>

Т.е. основополагающий класс будет ~~revolverSlider~~, его и необходимо использовать как обертку. Файлы ~~style2.css~~ и ~~function.js~~ содержат в себе базовый стили слайдера и сценарий обработки соответственно.

Исходные файлы плагина слайдера для сайта jQuery можно скачать по ссылке ниже.