X
Юрий Немец

Креативный слайдер для сайта jQuery — необычные слайдеры для сайта

Много ли Вы видели разнообразных слайдеров? Я думаю достаточно, но этот слайдер для сайта выглядит очень креативно и необычно. Конечно, не так много мест, где его можно разместить, но то, что он сделает Ваш сайт более уникальным — это однозначно! На что похож эффекта этого слайдера? Возможно, у Вас в детстве была такая подзорная труба, где можно было крутить колесико и внутри появлялись различные фигуры, как мозаика.

Вот что я нашел на сайте еще на тему слайдеров:

Надеюсь Вы найдете что-то подходящее для себя из этой подборки. Если не нашли — тогда смотрите на слайдер для сайта, который мы рассмотрим в этой статье.

Посмотрите на слайдер для сайта jQuery по ссылке ниже:

Посмотреть примерСкачать

Вот как выглядят некоторые слайды из демо:

Как установить слайдер для сайта?

HTML часть

В качестве примера установки я выбрал Демо 1.

Подключаем между тегами <head> </head> следующие стили (normalize.css и component.css):

HTML КОД
1
2

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

Данные файлы стилей необходимо подключать для каждого вида слайдера.

Сейчас давайте взглянем на HTML структуру слайдера для сайта:

HTML КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="content">
    <div class="cache">
        <img src="img/masks/prism-a.svg">
        <img src="img/masks/prism-b.svg">
        <img src="img/masks/prism-c.svg">
 
        <img src="img/bird-a.jpg">
        <img src="img/bird-b.jpg">
        <img src="img/bird-c.jpg">
        <img src="img/bird-d.jpg">
    </div>
 
    <div class="wrapper">
        <div class="prism-slider">
            <ul class="navigation"></ul>
        </div>
        <div class="copy">
            <!-- Текстовое описание -->
        </div>
    </div>
</div>

Что и в какой строчке находится:

  • Строка: с 3 по 5 — указываем какую маску использовать. Всего их три — столько же, сколько видов слайдера. Маска отвечает за то «безобразие», которое получается в центре слайдера.
  • Строки: с 7 по 10 — изображения для слайдера jQuery. Они «подхватываются» автоматически плагином, и затем добавляется соответствующее количество элементов управления.
  • Строка: 15 — здесь размещается динамически сгенерированная навигация по элементам слайдера.
  • Строка: 18 — в эту область Вы можете вписать своё описание для слайдера jQuery (также, как это сделано в демо).

Вы можете заменить изображения в папке img на свои собственные или же разместить свои изображения с произвольными названиями. После чего не забудьте их изменить в структуре HTML.

jQuery часть

Чтобы наш слайдер для сайта заработал перед закрывающим тегом </body> мы разместим несколько скриптов (rAF.js, easing.js, PrismSlider.js и slideshow1.js):

HTML&JS КОД
1
2
3
4

<script src="js/utils/rAF.js"></script>
<script src="js/utils/easing.js"></script>
<script src="js/PrismSlider.js"></script>
<script src="js/slideshow1.js"></script>

Последний скрипт необходимо выбирать в зависимости от того, какой из слайдеров Вам понравился. Если 1-й слайдер для сайта — тогда slideshow1.js, если 2-й слайдер — slideshow2.js, если 3-й слайдер — то выбираем slideshow3.js.



Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Категории: jQuery