Креативний слайдер для сайту jquery - незвичайні слайдери для сайту

Чи багато Ви бачили різноманітних слайдеров? Я думаю достатньо, але цей слайдер для сайту виглядає дуже креативно і незвично. Звичайно, не так багато місць, де його можна розмістити, але те, що він зробить Ваш сайт більш унікальним - це однозначно! На що схожий ефект цього слайдера? Можливо, у Вас в дитинстві була така підзорна труба, де можна було крутити коліщатко і всередині з`являлися різні фігури, як мозаїка.

Ось що я знайшов на сайті ще на тему слайдеров:

• Слайдери на чистому CSS + бонусний слайдер
• Вертикальний слайдер за допомогою jQuery і CSS переходами
• Цікавий слайдер на jQuery
• Розсувний слайдер тільки на CSS3

Сподіваюся Ви знайдете щось підходяще для себе з цієї добірки. Якщо не знайшли - тоді дивитеся на слайдер для сайту, яке ми розглянемо в цій статтею.

Подивіться на слайдер для сайту jQuery за посиланням нижче:

Подивитися прімерСкачать

Ось як виглядають деякі слайди з демо:

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

HTML частина

Як приклад установки я вибрав Демо 1.

Відео: Слайдер для сайту. BxSlider

Підключаємо між тегами наступні стилі (normalize.css і component.css):

12

lt;link rel="Stylesheet" type="Text / css" href="Css / normalize.css" /gt;lt;link rel="Stylesheet" type="Text / css" href="Css / component.css" /gt;

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

Зараз давайте поглянемо на HTML структуру слайдера для сайту:

Відео: Створення слайдера за допомогою плагінів jQuery

123456789101112131415161718192021

lt;div class="Content"gt;lt;div class="Cache"gt;lt;img src="Img / masks / prism-a.svg"gt;lt;img src="Img / masks / prism-b.svg"gt;lt;img src="Img / masks / prism-c.svg"gt;lt;img src="Img / bird-a.jpg"gt;lt;img src="Img / bird-b.jpg"gt;lt;img src="Img / bird-c.jpg"gt;lt;img src="Img / bird-d.jpg"gt;lt;/divgt;lt;div class="Wrapper"gt;lt;div class="Prism-slider"gt;lt;ul class="Navigation"gt; lt;/ulgt;lt;/divgt;lt;div class="Copy"gt;lt;/divgt;lt;/divgt;lt;/divgt;

Що й у якій сходинці знаходиться:

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

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

jQuery частина

Щоб наш слайдер для сайту заробив перед закриває тегом ми розмістимо кілька скриптів (rAF.js, easing.js, PrismSlider.js і slideshow1.js):

1234

lt;script src="Js / utils / rAF.js"gt; lt;/scriptgt;lt;script src="Js / utils / easing.js"gt; lt;/scriptgt;lt;script src="Js / PrismSlider.js"gt; lt;/scriptgt;lt;script src="Js / slideshow1.js"gt; lt;/scriptgt;

Останній скрипт необхідно вибирати в залежності від того, який з слайдеров Вам сподобався. Якщо 1-й слайдер для сайту - тоді slideshow1.js, якщо 2-й слайдер - slideshow2.js, якщо 3-й слайдер - то вибираємо slideshow3.js.

висновок

Згоден, слайдер дуже незвичайний і його ефект також нестандартний. Але якщо Ви знайдете застосування даного слайдеру у себе на сайті - Ваш сайт знайде свою родзинку.

Успіхів!

джерело: оригінал

З повагою, Юрій Німець