Гэр
Тохиргоо 
jquery зургийн слайдер. Дасан зохицох слайдеруудын сонголт. jQuery зургийн слайдер, slideJS залгаас

jquery зургийн слайдер. Дасан зохицох слайдеруудын сонголт. jQuery зургийн слайдер, slideJS залгаас

Зохиогчоос:Вэб хуудсуудын гүйлгэхгүйгээр харагдах хэсэг нь "үхсэн" гэсэн цуу яриа гарсан ч сайн гулсагчийн хэрэгцээ арилаагүй байна. Хэсэгхэн зуур шударга байцгаая - гулсагч нь хөгжилтэй байдаг. Нэмж дурдахад, зөөж буй контентоос ялгаатай нь хэрэглэгчдэд "хөөх" нөлөө үзүүлэхгүй. Бүх гулсуурууд нь бие биенээ орлодог хэд хэдэн слайдын багц бөгөөд гулсагч код нь аль болох хөнгөн байх нь маш чухал юм. Ийм тохиолдолд jQuery бидэнд туслах болно.

Envato Market-ийн 20 jQuery гулсагчийг харвал тэдгээрийн дундуур жигдхэн урсдаг зургийн блокоос илүү гулсуурууд байдгийг та ойлгох болно.

1. RoyalSlider – jQuery ашиглан мэдрэгчтэй дэлгэцийн зургийн цомог

Өнөө үед мэдрэгчтэй дэлгэцэнд ээлтэй мэдрэгчтэй гулсагч нь өмнөхөөсөө хамаагүй илүү утгатай. RoyalSlider нь хариу үйлдэл болон мэдрэгчтэй дэлгэцийн функцийг хоёуланг нь хослуулсан. Сайн сонголт, галерей нь HTML5 болон CSS3 дээр бичигдсэн тул.

Зарим сонирхолтой онцлог:

Хэрхэн өөрөө вэбсайт үүсгэх вэ?

SEO оновчлол

Өндөр тохируулгатай

10 гаруй гарааны загвар

CSS3 шилжилтийн нөөц бий

Миний бодлоор хамгийн гайхалтай онцлог нь "модульчлагдсан скрипт архитектур" бөгөөд энэ нь шаардлагагүй зүйлсийг үндсэн JS файлаас хасах боломжийг олгодог бөгөөд ингэснээр жингээ бууруулдаг. RoyalSlider, JQuery-ийн мэдрэгчтэй дэлгэцийн зургийн цомог нь ямар ч хөгжүүлэгчийн хэрэгсэлд нэмж оруулах найдвартай JavaScript гулсагч юм.

2. Slider Revolution хариу үйлдэл үзүүлэх jQuery залгаас

Гулсагчаар "хувьсгалт" зүйл хийнэ гэдэг амаргүй. Слайдерын тухайд та тэдгээрт нэмж болох олон боломжууд байдаг. Гэсэн хэдий ч Slider Revolution бол үнэхээр сайн оролдлого юм. jQuery слайдеруудын дунд энэ жишээ нь таны боломжит бүх шаардлагыг хангаж байна.

Слайдерын функцуудын жагсаалт маш том тул би зөвхөн хамгийн сайныг нь жагсаах болно:

Параллакс эффект ба захиалгат хөдөлгөөнт дүрс

Хязгааргүй тооны давхаргууд болон холбоос бүхий слайдууд

ашиглахад бэлэн, гүнзгий өөрчлөх боломжтой хэв маяг

болон бусад олон

Зураг, суулгагдсан видео тоглуулагч, холбоосыг нэмэх боломжтой нийгмийн сүлжээнүүд Slider Revolution нь вэб дээрх хамгийн уян хатан, өөрчлөх боломжтой сонголтуудын нэг болгодог.

3. LayerSlider дасан зохицох jQuery гулсагч залгаас

"LayerSlider дасан зохицох jQuery slider залгаас" нэр нь энэ гулсагчийг үнэхээр үнэлж чадахгүй.
Слайд хоорондын 200+ 2D болон 3D шилжилт нь хэний ч толгойг эргүүлэх болно.

Хэд хэдэн онцлох шинж чанарууд:

13 арьс, 3 төрлийн цэстэй

Слайдер дээр тогтсон зургийг байрлуулах чадвар

Мөн jQuery нөөц

Мөн өөр олон зүйл

Өмнөх слайдерын нэгэн адил та бараг ямар ч контент, тэр ч байтугай HTML5 суурин мультимедиа контентыг нэмж болно. LayerSlider нь гулсагчийг амилуулах бөгөөд маш үзэсгэлэнтэй юм.

4. jQuery Banner Rotator/Slideshow

jQuery Banner Rotator / Slideshow нь үндсэн функцийг золиосолдоггүй нэлээд энгийн гулсагч юм.

Боломжууд:

Зөвлөмж, текст оруулга гэх мэт.

Урьдчилан харах болон бүрэлдэхүүн хэсгүүдийг үзэх янз бүрийн сонголтууд

Нэг эсвэл бүх гулсагчийн саатал бүхий таймер

Бүх слайдад зориулсан олон шилжилт эсвэл тус бүрд өөр өөр шилжилтүүд

jQuery Banner Rotator / Slideshow нь бусад JQuery слайдеруудтай харьцуулахад зөвхөн үндсэн боломжуудтай боловч та үүнийг мартаж болохгүй.

5. All In One Slider – Responsive jQuery slider залгаас

Интернет дээр гарч буй аливаа гулсагч нь өөрийн гэсэн өвөрмөц алсын хараатай бөгөөд өөрийн салбарт байгаа аливаа асуудлыг шийддэг. Гэхдээ энэ биш. All In One Slider-ийг "бүгдийг багтаасан" гэж нэрлэж болно.

Ихэнх вэб хөгжүүлэгчид, дизайнерууд батлагдсан шийдэлтэй байдаг гэж би бодож байна, гэхдээ тэд үргэлж шинэ зүйлийг эрэлхийлдэг. Мөн энэ "шинэ зүйл" нь:

Баннер эргүүлэгч

Урьдчилан харах баннер

Тоглуулах жагсаалт бүхий баннер

Агуулгын слайдер

Карусель

Бүх төрлийн гулсагч нь jQuery гулсагчдад шаардлагатай бүх функцийг биш юмаа гэхэд ихэнхийг дэмждэг. All In One Slider таны бүх зүйлийг багтаасан байх уу?

6. UnoSlider – Дасан зохицох мэдрэгчтэй гулсагч

Хэрэв таны гулсагч хариу үйлдэл үзүүлэхгүй, мэдрэгчтэй дэлгэцийг дэмждэггүй бол гулсагч буруу байна гэсэн үг. UnoSlider зөв байна.

Энэхүү гулсагч нь энгийн байдал болон олон тооны функцуудын хооронд наранд байр сууриа олж чадсан. Чиг үүрэг:

Сэдвийн дэмжлэг

12 бэлэн сэдэв

40 шилжилт

IE6+ дэмжлэг

Загвар, хэв маягийг онцолсон бүх функцууд нь UnoSlider-ийг сэдэв нэмэх чадвартай, гайхалтай агуулгын гулсагч болгодог.

7. Мастер Slider - jQuery мэдрэгчтэй дэлгэцийн гулсагч

"Бүгдийг нь удирдах нэг jQuery гулсагч" хайж байна уу? Master Slider – JQuery мэдрэгчтэй дэлгэцийн доорх гулсагчийг ашиглаж үзээрэй өөр өөр хэмжээтэйдэлгэц...

Сайн дизайны тухай ярихад энэ жишээ нь хамгийн сайн жишээ юм.

25 гаруй загвар

Техник хангамжийн хурдасгасан шилжилт

Дэмжлэгт хүрч, шударна уу

Мөн өөр олон зүйл

Интерактив шилжилт, хөдөлгөөнт давхаргууд болон халуун цэгүүд таны анхаарлыг татах нь гарцаагүй. Мастер Слайдер бол урлагийн бүтээл юм.

8. TouchCarousel - jQuery контентын гүйлгэх болон гулсагч

TouchCarousel нь үнэгүй дэмжлэг, шинэчлэлтүүдийг санал болгодог. Гэсэн хэдий ч энэ нь хөнгөн жинтэй jQuery тойруулалтын гулсагчийн бүх онцлог биш юм.

Хэрэв нэрэнд нь "хүрч" гэсэн үг байгаа бол гулсагч нь бүрэн дасан зохицож, хүрэхийг дэмждэг гэж таамаглаж болно. Бусад онцлогууд:

SEO оновчлол

Ухаалаг автомат тоглуулах

Техник хангамжийн хурдатгал бүхий CSS3 шилжилтүүд

Тохируулах боломжтой UI болон Photoshop-т зориулсан 4 арьс

TouchCarousel нь слайдуудын өвөрмөц физик гүйлгээний ачаар мэдрэмжийн цоо шинэ түвшинг авчирдаг. хөдөлгөөнт төхөөрөмжүүдӨө.

9. Advanced Slider - jQuery XML гулсагч

jQuery гулсагчийг зөвхөн вэбсайтад ашиглах боломжгүй. Тэд вэб програмуудад бас хэрэг болно. Advanced Slider нь үүнийг хийх боломжийг танд олгоно.

HTML эсвэл XML тэмдэглэгээтэй энэ дэвшилтэт гулсагч нь удаан хугацааны сэтгэгдэл төрүүлдэг:

Хөдөлгөөнт давхаргууд болон ухаалаг видео

100+ шилжилт, 150+ захиалгат шинж чанарууд

15 гулсагч арьс, 7 гүйлгэх самбар, суурилуулсан гэрэл хайрцагны дэмжлэг

Гарын навигаци, мэдрэгчтэй дэмжлэг, бүрэн тохируулга

Мөн өөр олон зүйл

Гэсэн хэдий ч хамгийн их шилдэг онцлогЭнэхүү Advanced Slider нь jQuery XML Slider API бөгөөд гулсагчийг таны вэб програмд ​​хамгийн тохиромжтой сонголт болгодог.

10. jQuery Slider Zoom In/Out Effect Full Responsive

Эдгээр jQuery слайдеруудын нэг нь таныг түүний онцлог шинж чанаруудын талаар уншиж эхлэхээсээ өмнө демо үзэх боломжийг олгодог. Та энэ "томруулах/багасгах эффект" гэж юу болохыг ойлгохыг л хүсч байна.

Томруулах нөлөө нь нэлээд сул боловч гулсагчийн бусад хэсэг нь хөдөлгөөнгүй байхад энэ нь хяналт, бодит мэдрэгчийг дүрсэнд нэмж өгдөг. Слайдерын онцлог шинж чанарууд:

CSS3 давхаргын шилжилт

Давхаргад зориулсан хөдөлгөөнт дүрсний төгсгөлийн сонголт

Тогтмол өргөн, бүтэн дэлгэц, бүтэн өргөн сонголтууд

HTML болон CSS форматтай хөдөлгөөнт текст

Ихэнх гулсагчууд аль болох олон эффект оруулахыг хичээдэг ч jQuery Slider Zoom In/Out Effect Fully Responsive нь зөвхөн Ken Burns эффекттэй боловч сайн хэрэгждэг.

11. jQuery Carousel Evolution

Дээр дурдсан Advanced Slider - jQuery XML Slider-ийн нэгэн адил jQuery Carousel Evolution нь өөрийн API-тай бөгөөд функцийг сайжруулах эсвэл гулсагчийг өөр төсөлд нэгтгэхэд ашиглаж болно.

Хэрхэн өөрөө вэбсайт үүсгэх вэ?

Өнөөдөр бие даан вэбсайт бүтээхэд ямар технологи, мэдлэг хэрэгтэй байна вэ? Эрчимжүүлсэн үед олж мэдээрэй!

Зургийн хамт, HTML тэмдэглэгээ, YouTube болон Vimeo видеонуудыг та мөн хүлээн авах болно:

SEO оновчлол

9 тойруулгын хэв маяг

Сүүдэр ба тусгалын эффектүүд

Зургийн хэмжээг урд болон хойд аль алинд нь тохируулах боломжтой

jQuery Carousel Evolution нь олон төрлийн хэрэглээтэй энгийн тойруулга юм.

12. Sexy Slider

Sexy Slider өмнөх шигээ тачаангуй байхаа больсон. Гэсэн хэдий ч наснаасаа болоод энэ гулсагч нь найдвартай.

Слайдер нь эхлээд харахад тийм ч гайхалтай харагдахгүй ч, хэрэв та үүнийг сайн тохируулбал энэ нь таны загварт бүрэн нийцэх болно. Боломжууд:

Слайдуудыг автоматаар тоглуулах

Зургийн тайлбар

Слайдыг тасралтгүй тоглуулах

6 шилжилтийн эффект

Sexy Slider нь таныг бүрэн хүч чадал, боломжоо нээхийг хүлээж байна.

13. Lightbox бүхий jQuery Image & Content Scroller

Эдгээр бүх гар утсанд бэлэн загвар, дэмжлэгтэйгээр мэдрэгчтэй дэлгэцүүдМартаагүй jQuery гулсагчийг харахад таатай байна ширээний компьютерууд.

jQuery Image & Content Scroller w/ Lightbox нь гар болон хулганы дугуй болон бусад функцуудыг дэмждэг:

Хэвтээ ба босоо чиглэл

Слайдер дотор эсвэл гадна талд текстийн тайлбар

Нэг удаад харагдахуйц тодорхой тооны слайдыг тохируулах чадвар

Inline зураг, Flash, iframe, Ajax болон inline контент

Слайдер нь мөн суурилуулсан гэрлийн хайрцагтай. Хэрэв та хүсвэл jQuery Image & Content Scroller w/ Lightbox дээр гулсагчийг өөрөө ажиллуулж болохгүй, харин тус тусад нь гэрэлтүүлгийн хайрцгийг ажиллуулна уу.

14. Тунгалаг - Дасан зохицох баннер эргүүлэгч/гулсагч

Ихэнх jQuery слайдерууд өөрийн гэсэн загвартай байдаг. Та үүнийг өөртөө тохируулж болно, гэхдээ заримдаа та бүх зүйлийг гулсагч дотор байлгахыг хүсдэг. Бид танд Translucent-ийг танилцуулж байна.

Слайдер нь маш олон урьдчилан тохируулгатай. Та зүгээр л тодорхой тохиргоог хийх хэрэгтэй байж магадгүй, тэгээд л болоо. Боломжууд:

6 өөр загвар

4 шилжилтийн эффект

2 шудрах шилжилт

Тохиромжтой товчлуурууд болон тайлбарууд

Бусадтай адил энэ гулсагч нь мэдрэгчтэй, мэдрэгчтэй, мэдрэгчтэй техник хангамжийн хурдатгал. Тунгалаг бол хамгийн бага дизайнтай гулсагч бөгөөд агуулгыг хамгийн түрүүнд тавьдаг.

15. FSS – Бүрэн дэлгэцийн гүйдэг вэб сайтын залгаас

Та слайдаас бүрдсэн бүтэн дэлгэцийн вэбсайт хийхийг хүсч байна уу? Дараа нь танд FSS хэрэгтэй болно.

Үнэн хэрэгтээ энэ JQuery гулсагчийг ашиглан бүтэн дэлгэцийн слайдер вэбсайт үүсгэх нь маш хялбар юм. Боломжууд:

AJAX дэмжлэг

Гүйлгэх мөр

Гүн холболтын технологийн дэмжлэг

2 өөр шилжилтийн эффект

Мөн гарын дэмжлэг болон 11 хуудас гарын авлагад анхаарлаа хандуулах нь зүйтэй. Гэсэн хэдий ч жинхэнэ сэтгэгдэл бол FSS-ийн жин, ердөө 5Kb юм.

16. Zozo Accordion – Дасан зохицох мэдрэгчтэй гулсагч

Загвар зохион бүтээхэд анхаарлаа хандуулж, сайн ажил хийдэг jQuery слайдерын өөр нэг жишээ. Zozo Accordion бол загвараа өөрчлөх чадвартай баян хуурын сайн гулсагч хайж байгаа хүмүүст заавал байх ёстой зүйл юм.

Энэхүү CSS3 хүүхэлдэйн кино нь мөн нэлээд өргөн хүрээний функцуудтай:

Хэвтээ ба босоо баян хуур

Семаль HTML5 ба SEO оновчлол

Мэдрэгч, гар болон WAI-ARIA дэмжлэг

10 гаруй арьс, 6 загвартай

Мөн өөр олон зүйл

Zozo Accordion нь үнэ төлбөргүй дэмжлэгтэй, байнгын шинэчлэлттэй, мөн jQuery баян хуур дээр таны хүссэн бүх боломжуудтай.

17. jQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin нь гулсагчаас илүү энгийн хөдөлгөөнт дүрстэй адил юм. Энэ жишээ нь слайдыг нэг нэгээр нь харуулахын оронд дараагийн слайд руу шилжихийн өмнө тухайн хэсэгт зай үлдэхгүй болтол нэг удаад слайдаар дэлгэцийг дүүргэдэг.

CSS3 хөдөлгөөнт дүрс нь Animate.css дор ажилладаг, хөнгөн жинтэй, хэд хэдэн давхаргаас бүрдэх ба гар утсанд тохиромжтой. Олон онцлог:

Чирэх, буулгах навигацийн сонголт бас байдаг. jQuery Responsive OneByOne Slider Plugin нь Twitter Bootstrap Carousel-ээр ажилладаг.

18. Accordionza - jQuery залгаас

Үүнээс илүү хялбар jQuery слайдер байхгүй. Ашиглахын тулд та зөвхөн 3Kb гулсагчийг татаж авах хэрэгтэй бөгөөд энэ нь Accordionza-г хамгийн хөнгөн баян хуур гулгагч болгодог.

Хэрэв танд загварын гурван сонголт таалагдахгүй бол HTML болон CSS-г өөрөө өөрчилж болно. Боломжууд:

Гарын навигаци

Эффект болон товчлууруудыг тохируулахад хялбар

Прогрессив сайжруулах техник - JavaScript-гүйгээр ажилладаг

Accordionza нь холимог контентын олон хувилбарыг үзүүлж чаддаг тул маш уян хатан болгодог гэдгийг санаарай.

19. mightySlider – Хариуцлагатай олон зориулалттай гулсагч

MightySlider бол үнэхээр хүчирхэг гулсагч юм. Энэ нь зөвхөн энгийн дүрс гулсагч төдийгүй цэсийн зүйлийн навигаци бүхий бүтэн дэлгэцийн нэг чиглэлтэй гулсагч болгон ашиглаж болно. Түүний тусламжтайгаар та нэг хуудастай гайхалтай вэбсайт хийж чадна.

Бүрээсний доор та олон сонголтыг олох болно:

Гар, хулгана, мэдрэгчтэй дэмжлэг

Техник хангамжийн хурдатгал бүхий CSS3 шилжилтүүд

Хүчин төгөлдөр тэмдэглэгээ болон SEO оновчлолыг цэвэрлэ

Хязгааргүй тооны слайд, тайлбарын давхаргууд, тэдгээрийн эффектүүд

API нь маш хүчирхэг бөгөөд хөгжүүлэгчдэд ээлтэй бөгөөд энэ нь нээгддэг янз бүрийн арга замуудтүүний хэрэглээ. MightySlider бол цэвэр, сайн тайлбартай код бүхий маш сайн, дэвшилтэт jQuery слайдер юм.

20. Parallax Slider - Responsive jQuery залгаас

Parallax Slider нь jQuery Responsive OneByOne Slider Plugin шиг ажилладаг бөгөөд нэг слайд дотор давхарга бүрийг тусад нь хөдөлгөөнд оруулах боломжийг танд олгоно. Та параллакс хөдөлгөөнт дүрсийг нэмснээр бүх слайдыг эсвэл нэгийг нь ч хөдөлгөж болно.

4 гулсагчтай янз бүрийн төрөл, бүгд параллакс нөлөөтэй. Бусад jQuery слайдеруудын нэгэн адил энэ нь:

Бүрэн тохируулах боломжтой

Мэдрэгчийн дэмжлэг

Бүрэн хариу үйлдэл үзүүлэх, хязгааргүй давхарга

Автоматаар тоглуулах, давталт хийх, өндөр өргөн тохируулах, цаг хэмжигч

Хөдөлгөөнт давхарга нь зөвхөн текст эсвэл зураг биш юм. Та мөн YouTube, Vimeo болон HTML5 видеог нэмж болно. Parallax Slider нь Flash эффектийг бүх төхөөрөмж дээр дэмждэг Flash-ээс ч илүү сайн дуурайж болох бас нэг сайн жишээ юм.

Дүгнэлт

jQuery гулсагч нь нэг зургийг өөр дүрсээр сольсон зүйлээс хэрхэн асар том бүтээлч хэрэгсэл болон хувирсныг харах нь сонирхолтой юм. Одоо 3D, параллакс слайдер, бүтэн хуудас гулсагч, дасан зохицох гулсагч болон ширээний компьютер болон ухаалаг гар утсан дээр үзэх боломжтой.

Хэрэв танд ямар нэгэн гулсагч таалагдаагүй бол энэ жагсаалт, та үргэлж Envato дээрх jQuery кодын зааварчилгааг авч, цоо шинэ, өвөрмөц зүйлийг хөгжүүлэх боломжтой.

Эсвэл Envato Market дээрх бусад гулсагчуудыг шалгаарай - сонгох боломжтой олон зүйл бий. Таны дуртай jQuery слайдер юу вэ, яагаад?

Дасан зохицох, эсвэл та хүсвэл хариу үйлдэл үзүүлэх вэб дизайн нь одоо зөвхөн дизайны өөр нэг чиг хандлага биш бөгөөд энэ нь вэбсайтын олон талт байдал, хэрэглэгчийн янз бүрийн төхөөрөмжүүдийн дэлгэцэн дээр эв нэгдэлтэй харагдах байдлыг хангах вэбсайт хөгжүүлэх тодорхой стандарт юм. Саяхан, мэдрэмжтэй загвар боловсруулахдаа би дизайны ерөнхий хэв маягийг алдагдуулахгүйгээр тодорхой гулсагч болон зургийн галерейг нэгтгэхэд янз бүрийн бэрхшээлтэй тулгарсан. Одоо бүх зүйл илүү хялбар болсон, Интернет дээр маш олон тооны бэлэн шийдлүүд байдаг бөгөөд ялангуяа тааламжтай зүйл бол тэдгээрийн ихэнх нь чөлөөтэй, нээлттэй байдаг. эх код.

Санал болгож буй олон янзын хэрэгслүүдийн улмаас би саяхан гарч ирсэн, ямар ч хязгаарлалтгүйгээр түгээгдсэн jQuery зургийн слайдеруудын хамгийн алдартай бүтээн байгуулалтын товч тоймыг эмхэтгэсэн. туйлын үнэ төлбөргүй.

WOW Slider

Маш олон тооны харааны эффектүүд (эргэлт, дэгдэмхий, бүдэгрүүлэх, спираль, наалт гэх мэт) болон олон бэлэн загвар бүхий хариу үйлдэл үзүүлэх jQuery зургийн слайдер. WOW Slider-ийн суурилагдсан хуудас оруулах шидтэний тусламжтайгаар та хэдхэн минутын дотор гайхалтай слайдшоуг хялбар бөгөөд хүчин чармайлтгүйгээр бүтээх боломжтой. Хөгжүүлэгчийн вэбсайт нь залгаасыг орос хэл дээр тохируулах, ашиглахад шаардлагатай бүх баримт бичиг, мөн залгаас хэрхэн ажилладаг талаар маш сайн жишээг агуулдаг. Тусдаа Wordpress залгаас болон Joomla-д зориулсан модулийг татаж авах боломжтой. Энэхүү гайхамшигтай гулсагч, эхлэгч болон туршлагатай вэбмастеруудад таалагдах болно гэдэгт би итгэлтэй байна.

HiSlider

HiSlider - HTML5, JQuery гулсагч ба зургийн цомог, WordPress, Joomla, Drupal гэсэн алдартай системүүд дээр ажилладаг сайтууд дээр хувийн хэрэгцээнд зориулсан үнэхээр үнэгүй залгаас. Энэхүү энгийн боловч нэлээд ажиллагаатай хэрэгслийн тусламжтайгаар та вэбсайтынхаа хуудсан дээр гайхалтай, эрч хүчтэй слайд шоу, гайхалтай танилцуулга, шинэ мессежийн зарлалуудыг хялбархан бүтээх боломжтой. Слайдерт зориулсан хэд хэдэн бэлэн загвар, арьс, гайхалтай агуулгын шилжилтийн (өөрчлөлтийн) эффектүүд, төрөл бүрийн мультимедиа контентын гаралт: YouTube болон Vimeo-ийн видеонууд, уян хатан хэрэглэгчийн тохиргоо гэх мэт...

Nivo Slider

Nivo Slider бол хамгийн үзэсгэлэнтэй, ашиглахад хялбар зургийн гулсагчуудын нэг бөгөөд мэддэг хүн бүрийн сайн мэддэг хуучин нэг юм. JQuery Nivo Slider залгаасыг татаж авах, ашиглахад үнэ төлбөргүй бөгөөд MIT лицензийн дагуу лицензтэй. WordPress-д зориулсан тусдаа залгаас байдаг ч харамсалтай нь энэ нь аль хэдийн төлбөртэй байгаа бөгөөд та нэг лицензийн хувьд 29 доллар төлөх шаардлагатай болно. WP сэдвийн файлуудыг ашиглан бага зэрэг ид шид хийж, Nivo Slider залгаасын үнэгүй jQuery хувилбарыг блогтоо хавсаргасан нь дээр, учир нь интернет дээр үүнийг хэрхэн хийх талаар маш их мэдээлэл байдаг.
Функциональ байдлын хувьд бүх зүйл сайхан байна. Энэ нь jQuery v1.7+ номын сан, сайхан шилжилтийн эффект, энгийн бөгөөд маш уян хатан тохиргоо, дасан зохицох зохион байгуулалт, дүрсийг автоматаар тайрах гэх мэт олон зүйлийг ашигладаг.

Слайдерын санааг Apple-ийн бүтээгдэхүүний танилцуулгын хэв маягаараа алдартай хөгжүүлэгчид өдөөсөн бөгөөд энд хэд хэдэн жижиг объект (зураг) нь сонгосон категори дээр дарж энгийн хөдөлгөөнт эффектээр өөрчлөгддөг. Codrops нь энэ гулсагчийг хэрхэн бүтээх талаар дэлгэрэнгүй заавар, Html тэмдэглэгээний иж бүрэн загвар, CSS дүрмийн багц, гүйцэтгэгдэх jQuery залгаас, мөн гулсагчийг ашиглах гайхалтай амьд жишээг танд толилуулж байна.

Slit Slider

JQuery болон CSS3 ашиглан бүтэн дэлгэцийн зургийн гулсагч + вэб сайтын хуудсанд залгаасыг нэгтгэх дэлгэрэнгүй заавар. Дараагийн эсвэл өмнөх агуулга руу шилжихдээ тодорхой агуулга бүхий нээлттэй одоогийн слайдыг зүсэх санаа юм. JQuery ашиглах ба CSS хөдөлгөөнт дүрсТа слайдуудын хооронд өвөрмөц шилжилтийг үүсгэж болно. Слайдерын мэдрэмжтэй зохион байгуулалт нь дэлгэцэн дээр адилхан сайхан харагдах боломжийг олгодог янз бүрийн төрөлхэрэглэгчийн төхөөрөмжүүд.

Уян агуулгын гулсагч

Байршсан эх савны хэмжээнээс хамааран өргөн, өндрийг автоматаар тохируулдаг агуулгын гулсагч. Хэрэглэхэд маш энгийн бөгөөд тохиргоонд уян хатан, гулсагч нь JQuery дээр ажилладаг бөгөөд дэлгэцийн хэмжээг доош нь өөрчлөхөд навигаци нь дүрс хэлбэрээр харагдана. Маш дэлгэрэнгүй баримт бичиг (бүтээлийн заавар) болон хэрэглээний амьд жишээнүүд.

3D Stack Slider

3D хавтгайгаас шилжилттэй зургуудыг харуулсан слайдерын туршилтын хувилбар. Зургууд нь хоёр хэвтээ стек болж хуваагддаг ба дараагийн зураг бүрийг харах төлөв рүү шилжүүлэхийн тулд навигацийн сумыг ашиглана. Ерөнхийдөө онцгой зүйл байхгүй, гэхдээ санаа нь өөрөө болон гүйцэтгэх техник нь нэлээд сонирхолтой юм.

Маш энгийн, 100% мэдрэмжтэй, бүтэн дэлгэцийн jQuery зургийн гулсагч. Слайдерын ажиллагаа нь jQuery-ийн ид шидтэй хамт CSS шилжилт (шилжилтийн шинж чанар) дээр суурилдаг. Хамгийн их өргөний утгыг анхдагчаар 100% гэж тохируулсан тул дэлгэцийн хэмжээ өөрчлөгдөхөөс хамааран зургийн хэмжээ өөрчлөгдөнө. Дизайн дээр тусгай хөдөлгөөнт эффект, хийсвэр зүйл байхгүй, бүх зүйл энгийн бөгөөд асуудалгүй ажиллахад зориулагдсан.

Хамгийн бага слайд

Нэр нь өөрөө ярьдаг, энэ нь магадгүй миний тааралдсан jQuery зургийн хамгийн хөнгөн, минималист слайдеруудын нэг юм (1кб залгаас). ResponsiveSlides.jsнь савны доторх элементүүдийг ашиглан слайд шоу үүсгэдэг жижигхэн jQuery залгаас юм. IE6 ба түүнээс дээш хувилбараас эхлээд ахиц дэвшлийн алдартай тоормос - IE-ийн бүх хувилбаруудыг багтаасан өргөн хүрээний хөтөчтэй ажилладаг. Энэхүү ажил нь найдвартай байдлын үүднээс CSS3 шилжилтийг javascript-тэй хамт ашигладаг. Эмх цэгцгүй жагсаалт ашиглан энгийн зохион байгуулалт, шилжилт, цагийн интервалыг тохируулах, автомат болон гарын авлагын удирдлагаслайдыг солих, түүнчлэн хэд хэдэн слайд шоуны дэмжлэг. Энд ийм хөгжилтэй "хүүхэд" байна.

Камер

Камер нь вэб сайтын хуудсан дээр слайд шоу зохион байгуулахад зориулагдсан үнэгүй JQuery залгаас, олон шилжилтийн эффект бүхий хөнгөн гулсагч, 100% мэдрэмжтэй байршил, маш сайн энгийн тохиргоо. Хэрэглэгчийн ямар ч төхөөрөмж (компьютерийн дэлгэц, таблет, ухаалаг гар утас гэх мэт) дэлгэцэн дээр төгс тохирно гар утаснууд). Суулгасан видеог үзүүлэх боломж. Товчлуур болон зургийн өнгөц зургийн блок ашиглан слайдыг автоматаар өөрчлөх, гараар удирдах. Авсаархан дизайнтай зургийн бараг бүрэн галерей.

bxSlider jQuery

jQuery дахь өөр нэг нэлээд энгийн хариу үйлдэл үзүүлэх слайдер. Та слайд дээрээ ямар ч контент, видео, зураг, текст болон бусад элементүүдийг байрлуулж болно. Мэдрэгчтэй дэлгэцийн өргөтгөсөн дэмжлэг. CSS шилжилтийн хөдөлгөөнт дүрсийг ашиглах. Слайд шоуны олон тооны янз бүрийн хувилбарууд, авсаархан зургийн галерей. Автомат болон гарын авлагын удирдлага. Товчнууд болон өнгөц зургийг сонгох замаар слайдыг сэлгэнэ үү. Жижиг эх файлын хэмжээ, тохируулах, хэрэгжүүлэхэд маш хялбар.

FlexSlider 2

FlexSlider 2 Шинэчилсэн хувилбарХариулах хурдыг сайжруулсан, скриптийг багасгаж, дахин дүрслэх/дахин зурахыг багасгасан ижил нэртэй гулсагч. Энэхүү залгаас нь үндсэн гулсагч, өнгөц зураг бүхий слайдын удирдлага, зүүн-баруун сум, товчлуур хэлбэртэй доод навигацийн мөрийг агуулдаг. Слайд (vimeo), уян хатан тохиргоо (шилжилт, дизайн, цаг хугацааны интервал), бүрэн дасан зохицох зохион байгуулалттай видеог харуулах чадвар.

Галлериа

Өндөр чанартай зургийн галерей болон гулсагч үүсгэхэд зориулагдсан сайн мэддэг, нэлээд алдартай responsive jQuery залгаас. Слайдерын интерфейс нь хяналтын самбарын ачаар танил видео тоглуулагчтай төстэй бөгөөд энэ нь хэд хэдэн өөр дизайны сэдвүүдийг агуулдаг. Flickr, Vimeo, YouTube болон бусад алдартай үйлчилгээнүүдийн суулгагдсан видео, зургийг дэмжих. Тохируулах, ашиглах талаархи дэлгэрэнгүй баримт бичиг.

Нэрс

Хариуцлагатай вэб дизайн хийхэд зориулагдсан энгийн, ямар ч үнэ төлбөргүй JQuery зургийн гулсагч. Нэрс бол туршилтын нээлттэй эхийн jQuery залгаас юм. Минималист дизайн, ямар ч эффект байхгүй, зөвхөн тодорхой хугацааны дараа бие биенээ орлуулж гарч ирэх зургууд. Бүх зүйл маш энгийн, суулгаж, холбоно уу ...

jQuery popeye 2.1

Lightbox элементүүдтэй маш авсаархан jQuery зургийн слайдер. Та нартаа баярлалаа уян хатан хэмжээ, ямар ч саванд хялбархан суулгаж, өнгөц зураг хэлбэрээр нэг оруулгад суулгаж, хулганын курсорыг гүйлгэхэд эсвэл түүн дээр дарахад томруулсан зураг, удирдлага бүхий лайт хайрцаг идэвхждэг. Бүтээгдэхүүн, мэдээний зарлалыг танилцуулахын тулд ийм гулсагчийг хажуугийн самбарт байрлуулах нь тохиромжтой. Их хэмжээний мэдээлэл бүхий сайтуудад зориулсан маш сайн шийдэл.

Дараалал

Нарийвчилсан CSS3 шилжилттэй үнэгүй хариу үйлдэл үзүүлэх гулсагч. Минималист хэв маяг, дизайны 3 сэдэв, Хүрээ бүр хэвтээ байдлаар гулсаж, голд гарч, зураг зүүн тийш, гарын үсэг баруун тийш, өнгөц зургийг баруун доод буланд давхардсан. Фрейм тус бүрээр үзэх бүтээгдэхүүний харагдах байдлыг хуудаснаа. Удирдлагын хэсэгт мөн урагш болон буцах товчлуурууд багтдаг. Орчин үеийн бүх хөтчүүдээр дэмжигддэг.

шудар

Функциональ байдал, тохиргооны хувьд маш энгийн зургийн слайдер нь слайдыг өөрчлөх хурдыг өөрчлөх, гарын авлагын горимыг идэвхжүүлэх (хяналтын товчлуурууд идэвхжсэн), тасралтгүй слайд шоу юм. Энэ гулсагч нь оршин байх эрхтэй бөгөөд энэ нь зөвхөн байгаа учраас л намайг татсан, би энэ хөгжүүлэлтээс тийм ч сонирхолтой зүйл олж чадаагүй, магадгүй би үүнийг сайн хайгаагүй байх)))

Responsive Image Slider

Владимир Кудиновын ийм сайхан, дасан зохицох дүрсний гулсагч, нөхдүүд. Тодорхой жишээнүүдээр хангагдсан хатуу, сайн зохион бүтээсэн хэрэгсэл дэлгэрэнгүй зааварүүсгэх, суурилуулах, ашиглах талаар. Дасан зохицох загвар, сайхан товчлуурууд, ногоон сумнууд, бүх зүйл маш сайхан, тайван, дарамтгүй.

FractionSlider

Зураг болон текст слайдад зориулсан параллакс эффект бүхий үнэгүй JQuery слайдер залгаас. Слайдын хөдөлгөөнт дүрс нь цаг хугацаа, хөдөлгөөнт дүрс бүрийг бүрэн хянах олон дэлгэцийн утгыг агуулдаг. Слайд дээрх хэд хэдэн элементийг нэгэн зэрэг хөдөлгөөнд оруулах чадвар. Та янз бүрийн хөдөлгөөнт аргуудыг тохируулах, слайдыг бүдгэрүүлэх, эсвэл тодорхой чиглэлээс шилжилт хийх боломжтой. Зурган дээр хулганыг аваачихад гарч ирэх навигацийн сумыг ашиглан автомат дэлгэц болон гар удирдлага. 10 төрлийн слайд хөдөлгөөнт эффект болон бусад олон...

Хяналт нь нэлээд өргөн хүрээтэй байсан ч хангалттай мэдээлэлгүй болсон их хэмжээнийтухайн бүтээгдэхүүнүүд. Бүх дэлгэрэнгүй мэдээлэл, дэлгэрэнгүй тайлбар функциональ байдалЭнэ эсвэл өөр залгаасын талаар та хөгжүүлэгчдийн хуудаснаас шууд олж мэдэх боломжтой. Би хэн нэгэнд вэбсайтынхаа хуудсууд дээр өнгөлөг зургийн гулсагч үүсгэх маш хэрэгтэй хэрэгслийг олоход хялбар болгосон гэж найдаж байна.

Орос хэл дээрх загвартай ажиллах нь сайхан байх болно гэж бодож байсан уу? Зүгээр л нэг минут бодоод үз дээ. Англи хэл дээрх загвартай ажиллахад цаг алдах хэрэггүй. Одоо та үүнийг TemplateMonster зах зээл дээрээс олох боломжтой тул бид танд баярлуулахаар яаравчлан байна. Тэд тус бүрийн текстийг гараар бичсэн. Мэдээжийн хэрэг, бүх бэлэн шийдлүүдийг ашиглахад гайхалтай хялбар байдаг.

Хүндэтгэсэн, Андрей

Бид урагш болон буцах товчлууруудыг нэмэх хэрэгтэй.

Үүнийг хийхийн тулд та өмнө нь бичсэн кодыг нэмж оруулах хэрэгтэй.

Шинэ гулсагчийн HTML код

Слайдерын бүтэц бүхэлдээ ижил хэвээр байх болно. Тэмдэглэгээнд хоёр сав нэмэгдэх бөгөөд энэ нь товчлуур болж үйлчилнэ.

>

Танд ч бас таалагдаж магадгүй