LPgenerator - Професионална целевата страница платформа за увеличаване на продажбите на Вашия бизнес

Кацане МАГАЗИН ОБУЧЕНИЕ ЗА ДЕЙСТВИЕ от страна на партньорите

В този урок ще създадем JQuery слайдер с помощта на "Ниво Slider JQuery скрипт" и CSS3. Ние ще използваме "Ниво Slider JQuery Script", тъй като той е мощен инструмент и е напълно безплатно. Този скрипт има 16 преходни ефекти, това е прост, гъвкав и има много интересни функции. Можете да го използвате почти навсякъде и за почти всеки проект, включително лични и търговски уебсайтове и каквато и да направите за WordPress, например.

Стъпка 1: Basic HTML маркиране

Първо трябва да изтеглите скрипта на JQuery Ниво Slider тук. Трябва само два файла от пакета, който сте изтеглили: "Ниво-slider.css" и "jquery.nivo.slider.pack.js".

След това създайте основен HTML маркиране и добавете "Ниво Slider" CSS и JS файлове. В допълнение, трябва да се приложи на JQuery библиотеката, като се използват най-новата версия хоствани от нас, или ако искате, можете да го поставите на вашия сървър, изборът е ваш.

За да изтеглите JQuery слайдер Ниво, трябва да добавим още няколко реда код, за да затварящ таг. Необходимо е също така да се създаде няколко възможности да направят видими контрол, променете непрозрачността на заглавната част и промяна на предишната и следните стрелките текст слайд.

Стъпка 2. Clayder HTML маркиране

Първо трябва да се създаде Разделение с клас "слайдер-обвивка" и "futurico-темата". След това създайте Разделение с идентификатор "слайдер" и клас "nivoSlider". За всеки слайд, ние ще създадем .

Стъпка 3. Разпределение JQuery слайдер

Ще създадем JQuery слайдер снимки 300px широк и 180 пиксела височина. След като добавите 5px Padding (Амер. Padding), ние трябва да се изважда веднага широчина 10px и височина. Ние също така да поиска от цвета на фона и заоблени ъгли.

Сега стигаме до стайлинга на плъзгача. Ще започнем с неговото разположение и центриране на дъното. Ако имате повече от четири пързалки, което трябва да се промени "ляво", с цел да се централизира на плъзгача.

Ние създаваме един кръг за всеки слайд. За стайлинг му, ще добавим фонов цвят, сенки и заоблени ъгли. За да скриете "1,2,3,4" номериране добавим текст тире, с отрицателна стойност.

За активното слайда ние добавяме зелен градиент и промяна на сянка.

Етап 5: Следваща и предишна Slide

За да оформите "следващата и предишната" плъзгача, ние ще го позиционира в центъра и добавете основните CSS стилове (шрифт, шрифт размер, цвят и т.н.)

Стъпка 6. Заглавията HTML маркиране

За да създадете заглавен, ние трябва да се създаде Разделение с класа "Ниво-HTML-надпис» и произволен идентификатор (ID). За да свържете титла със съответния слайд, ние трябва да се добави "титла" на със същото име като колектор ID.

Етап глава 7. Стил

За оформяне на подпис, ние ще се промени цвета на текста, шрифт семейство и размер. Ние също така ще използва същия зелен градиент, че сме използвали преди.

ВНИМАНИЕ! Използвате остарял браузър Internet Explorer

Този сайт е изграден върху най-напредналите и модерни технологии и не поддържа Internet Explorer втората и седмата версия.

Свързани статии

• Как да се създаде инфографика с предавки, използващи vectorscribe и Adobe Illustrator - rboom