Цікавий слайдер на jquery

При використанні CSS3 і jQuery окремо, вони надають широкий спектр можливостей. Але якщо використовувати разом ... Тоді вони можуть зробити ефекти дійсно вражаючими. Іноді з`являється така проблема, як краще і креативніше розташувати кілька зображень або фотографій із загальною темою в одному місці. Як варіант можна створити слайдер (тим більше їх величезна кількість). Але в цьому уроці ми створимо інтерактивну 3D галерею за допомогою CSS3 і jQuery. Щоб швидше розібратися і застосувати слайдер на своєму сайті - я рекомендую скачати демо версію (вона також доступна в повній новині) і просто зробити за аналогією в прикладі.

Реальний приклад можна побачити тут:

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

HTML частина - Цікавий слайдер на jQuery

Контейнер з класом main буде використовуватися для відображення задній фон. А далі всередині блоку з ідентифікатором immersive_slider можна додавати стільки слайдів, скільки вам необхідно. Кнопки переміщення по слайдах можна прибрати, якщо вони вам не потрібні:

12345678910111213141516

lt;div class="Main"gt; ...lt;div id="Immersive_slider"gt;lt;div class="Slide" data-blurred="Lt;gt; "gt; ...lt;/divgt;lt;div class="Slide" data-blurred="Lt;gt; "gt; ...lt;/divgt; ...lt;a href="#" class="Is-prev"gt;laquo-lt;/agt;lt;a href="#" class="Is-next"gt;raquo-lt;/agt;lt;/divgt;lt;/divgt;

Відео: Вчимо Java Script 12. Створюємо слайдер

jQuery частина

12345678

$("#immersive_slider").immersive_slider({animation: "Fade",slideSelector: ".slide",container: ".main",cssBlur: false,pagination: true,autoStart: 5000})-

Як ви могли помітити, при перегляді прикладу слайдера, існують різні ефекти переходів. Всі настройки даних переходів знаходяться у функції вище. Розглянемо дані настройки:

animation - значення, яке визначає як будуть змінюватися слайди. Приймає значення «fade», «slide», або «bounce". А для того щоб зробити вертикальну зміну слайдів, необхідно прописати «slideUp» або «bounceUp».
slideSelector - селектор, за яким вибираємо блоки зі слайдами.
container - ця властивість визначає основний контейнер, у якого буде змінюватися фон.
cssBlur - це пробна функція. Якщо не хочете ставити розмиття, тоді не ставте дане властивість.
pagination - активує навігацію.
autoStart - автоматичний старт показу слайдів.