Як створити фото-слайдер використовуючи jquery і css3

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

МАГАЗИН Лендінзі НАВЧАЛЬНИЙ КУРС АКЦІЇ ВІД ПАРТНЕРІВ

У цьому уроці ми будемо створювати jQuery слайдер з допомогою "Nivo Slider jQuery Script" і CSS3. Ми будемо використовувати "Nivo Slider jQuery Script", тому що це потужний інструмент, і він абсолютно безкоштовний. У цього скрипта є 16 ефектів переходу, він простий, гнучкий і має багато цікавих особливостей. Ви можете використовувати його практично в будь-якому місці і для майже будь-якого проекту, в тому числі особистих і комерційних веб-сайтів і будь-яких тем, які ви робите для вордпресс, наприклад.

Крок 1. Основні HTML розмітки

Перш за все, необхідно завантажити jQuery Nivo Slider скрипт тут. Вам потрібно всього лише два файли з пакету, який ви завантажили: "Nivo-slider.css" і "jquery.nivo.slider.pack.js".

Потім, створіть основну розмітку HTML і додайте "Nivo Slider" CSS і JS файли. Крім того, вам потрібно приєднати jQuery бібліотеку, використовуючи останню версію організовану Google або якщо ви хочете, ви можете розмістити його на своєму сервері, вибір за вами.

Для завантаження jQuery слайдера Nivo, нам потрібно додати ще декілька рядків коду перед закриває тега. Ми також повинні встановити кілька опцій, щоб зробити управління видимим, змінити непрозорість заголовка, і змінити попередній і наступний текст слайда стрілками.

Крок 2. Cлайдер HTML розмітки

Для початку нам потрібно створити div з класом "slider-wrapper" і "futurico-theme". Потім створюємо div з ідентифікатором "slider" і класом "nivoSlider". Для кожного слайда ми створимо .

Крок 3. Макет jQuery слайдера

Ми створимо jQuery слайдер картинок шириною в 300px і 180px в висоту. Як тільки ми додамо 5px паддінга (амер. Padding), нам потрібно відразу відняти 10px від ширини і висоти. Ми, також задамо колір фону і закруглити кути.

Тепер ми переходимо до стилізації повзунка. Ми почнемо з його розміщення і центрування внизу. Якщо у вас буде більше, ніж чотири слайди вам доведеться змінити значення "left", для того, щоб централізувати повзунок.

Ми створюємо гурток для кожного слайда. Для його стилізації, ми додамо колір фону, тіні і закруглені кути. Щоб приховати "1,2,3,4" нумерацію ми додамо відступ тексту з від'ємним значенням.

Для активного слайда ми додамо зелений градієнт і змінимо тіні.

Крок 5. Наступний і Попередній слайд

Для стилізації "наступного і попереднього" повзунка, ми будемо позиціонувати його в центрі і додамо основні стилі CSS (шрифт, розмір шрифту, колір і т.д.)

Крок 6. Заголовки HTML розмітки

Для створення заголовка, нам потрібно створити div з класом "Nivo-HTML-caption» і випадковим ідентифікатор (id). Щоб зв'язати заголовок з відповідним слайдом, нам потрібно додати "title" до з тим же ім'ям, що і id заголовка.

Крок 7. Стиль заголовка

Для стилізації підписи, ми будемо міняти колір тексту, сімейство шрифту, і його розмір. Ми також будемо використовувати той же зелений градієнт, який ми використовували раніше.

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.

Схожі статті

• Як створити інфографіку з шестернями, використовуючи vectorscribe і adobe illustrator - rboom