Създайте плъзгач на изображение с Jquery за мрежа

Ще създадем плъзгач, разработен с Jquery Y Nivo Slider, без нужда от плъгин и че можем да се адаптираме към нашия уебсайт.

За да направим това, ще използваме Jquery рамка, което е а библиотека за улесняване на работата с езика Javascript. Изтегляме библиотеката от Jquery.com, възможно е също така да го използвате, като дърпате googleapis.com използвайки този код на вашата html страница, за да добавите този скрипт.

Ако сте го изтеглили от страницата Jquery и сте го качили в директория на вашия уебсайт, трябва да го поставите да сочи вашия домейн като следния пример:

Сега нека изтеглим Плъзгач Nivo какво е Jquery библиотека, която ще ни позволи да създадем плъзгача. От тук можете да изтеглите безплатно Nivo slider. Разархивирайте файла в нашата директория, тук можем да видим структурата на мрежата.

Сега ще създадем файл index.html за нашия уебсайт, в заглавката ще поставим библиотеките и стиловите листове. Можем да видим библиотеката Jquery, библиотеката ниво плъзгач и собствените стилови таблици на плъзгача на Nivo, след което можем да ги персонализираме.

Сега ще създадем контейнер за нашите изображения и за плъзгача, за това и за да можем да го покажем, той е създаден в рамките на същия index.html (Може да бъде създаден и във файл със стил на CSS, за да отговаря на всеки един).
Започваме със структурата на мрежата и самия плъзгач, вмъквайки изображенията за показване и съобщение.

След това активираме плъгина ниво Silder и му изпращаме параметри за вида на ефекта, времето между анимацията, паузата между изображението и много други, които могат да се видят в документацията на Nivo Slider.

Нека забележим, че идентификаторът е активиран #silid същата, където дефинирам изображенията, така че ако искам да имам повече от един плъзгач, ще трябва да репликирам същата структура и да я активирам за съответния идентификатор.
Резултатът от тестването на index.html в браузър е:

Тук виждаме втория слайд, по -долу виждаме броя на слайдовете 1 и 2 и връзките по подразбиране Предишна (предишна) Следваща (следваща) ще подобрим изгледа на това с помощта на css.
Можем да променим числата в куршуми, просто като погледнем ниво-silder.css

 .nivo-controlNav {text-align: left; подложка: 0; позиция: относителна; z-индекс: 10; } .nivo-controlNav към {display: inline-block; ширина: 10px; височина: 10px; фон: url (bullets.png.webp) без повторение; текст -отстъп: -9999px; граница: 0; марж: 0 2px; } .nivo-controlNav a.active {background-position: 0 100%; } .nivo-directionNav към {display: block; ширина: 30px; височина: 30px; фон: url (arrows.png.webp) без повторение; текст -отстъп: -9999px; граница: 0; отгоре: авто; отдолу: -36px; z-индекс: 11; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; рамка-радиус: 2px; } a.nivo-nextNav {background-position: 160% 50%; вдясно: 0px; } a.nivo-prevNav {background-position: -60% 50%; вляво: авто; вдясно: 35px; } 

Резултатът от тази промяна ще бъдат числата като куршуми вляво и връзките като стрелки вдясно.

Ще разширим функционалността, като покажем блок от данни в един от слайдовете

Променяйки кода, който вече имаме, променяме абзаца в слайд 2 за блок, който ще извикам с id # block2, след което създавам блока и прилагам скрит стил, така че да се вижда само когато е активиран слайд 2.
Резултатът е следният:

Можете също да поставите миниатюрни изображения. Друга възможност е да генерирате динамично съдържанието от mysql и php или да го използвате в CMS шаблон като joomla или wordpress. Той идва с много програмирани плъгини, но с няколко реда код можем да създадем наш собствен компонент. Надявам се да ви е послужило.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка