Bepul to'plam HTML va CSS slayderi kod misollari: karta, taqqoslash, to'liq ekran, sezgir, oddiy, va boshqalar.

2018 yil iyun kolleksiyalarining yangilanishi. 7 ta yangi element.

Mundarija

Tegishli maqolalar

Kod haqida

HTML/CSS/JS-da ishga tushirish ekranlari to'plami. PNG piktogrammalarini qatlamlash, CSS3 o'tishlari va flexbox bilan shaxsiy tajriba.
HTML, CSS va JavaScript ma'lumotlar kartasi slayderi.
Endi Tran tomonidan yaratilgan

2015 yil 23 noyabr
Ish stoli va mobil brauzerlarda ishlaydigan foto slayder.
Taron tomonidan yaratilgan

2014 yil 29 sentyabr

Tegishli maqolalar

Taqqoslash (oldin/keyin) slayderlari

Tegishli maqolalar

Kuchli va sof tasvirni taqqoslash slayderi, CSS va jQuery bilan toʻliq sezgir va teginishga tayyor.

Tegishli maqolalar

Faqat html va CSS bilan oldin va keyin slayder.

Birdaniga yangi fikr bilan yozing, fotosurat oldidagi ikki harfimni vikorystyuchi. Uni minimal darajada ushlab turish. Vanilni ushlab turing. Foydali bo'lsa yoqing :)
Vanilla JS, minimal, oqlangan ko'rinish.
Huw tomonidan ishlab chiqarilgan

Tegishli maqolalar

2017 yil 3 iyul

JavaScript bilan "ajratilgan ekran" slayder elementi.
SVG ichidagi barcha slayderdan oldin va keyin uchun eksa qisqa eksperimenti. Maskalash buni juda oddiy qiladi. Hammasi SVG bo'lgani uchun tasvirlar va sarlavhalar bir-biriga mos ravishda kengaydi. Controller uchun GreenSock-ning Draggable va ThrowProps plaginlari.
Kreyg Roblevskiy tomonidan yaratilgan

2017 yil 17 aprel
Vikorist - slayder uchun oshxonani ishga tushirish uchun kirish.
Dadli Stori tomonidan yaratilgan

2016 yil 14 oktyabr
HTML, CSS va JavaScript bilan sezgir tasvirni taqqoslash slayderi.
Ege Görgülü tomonidan yaratilgan

2016 yil 3 avgust
Vikorist - slayder uchun oshxonani ishga tushirish uchun kirish.
Taqqoslash slayderidan oldin HTML5, CSS3 va JavaScript video.

2016 yil 24 aprel
CSS3 va jQuery tomonidan quvvatlangan 2 ta rasmni tezda solishtirish uchun qulay tortiladigan slayder.
CodyHouse tomonidan ishlab chiqarilgan

2014 yil 15 sentyabr

Tegishli maqolalar

To'liq ekranli slayderlar

Radio kirishlariga asoslangan oddiy slayder. 100% toza HTML + CSS. O'q tugmalari bilan ham ishlaydi.

Javob: ha

Tegishli maqolalar

Bog'liqliklar: -

Tegishli maqolalar

To'liq ekranli slayder uchun yaxshi o'tish effekti.

Tegishli maqolalar

Swiper.js bilan gorizontal parallaks toymasin slayder.

Sichqoncha harakatida sezgir silliq 3D istiqbolli slayder.
HTML, CSS va JavaScript bilan toʻliq ekranli qahramon tasviri slayderi (panellar mavzusini suring).
Tobias Bogliolo tomonidan yaratilgan

2017 yil 25 iyun
Animatsiyani oshirish uchun Tezlik va Tezlik effektlari (UI to'plami) yordamida keyingi o'zaro ta'sir. Animatsiya strelka tugmachalari, navbatni bosish yoki aylantirish uyasi orqali ishga tushiriladi. Ushbu versiya o'zaro ta'sirning bir qismi sifatida chegaralarni o'z ichiga oladi.
Stiven Skaff tomonidan yaratilgan

Tasvirlarni ko'rsatish uchun minimal uslubdagi oddiy slayder. Tasvirning bir qismi har bir slaydda paydo bo'ladi.
Natan Teylor tomonidan yaratilgan
2017 yil 22 yanvar

Narsani sozlash juda oson. Siz shriftni, shrift hajmini o'zgartirishingiz mumkin, shrift rangi, animatsiya tezligi. JSdagi massivdagi yangi satr uchun birinchi arkush tungi slaydda paydo bo'ladi. Yangi slaydni yaratish (yoki oʻchirish) oson: 1. JS-dagi massivga yangi shahar qoʻshing. 2. Tasvir raqami o'zgaruvchisini o'zgartirish va aw tasvirini CSS da scss ro'yxatiga qo'yish.
Ruslan Pivovarov tomonidan yaratilgan
2016 yil 8 oktyabr

1. To'rtburchaklar chegarasini maskalash uchun klip-yo'l (faqat veb-kit).
2. Ushbu niqob uchun aralashtirish rejimi.
3. Aqlli rang tizimi, shunchaki rang nomingiz va qiymatingizni sass xaritasiga kiriting va keyin elementlarga ushbu rang nomi bilan xususiyat sinfini qo'shing va hamma narsa ishlaydi!
4. Ajoyib kreditlar yon menyusi (demo markazidagi kichik tugmani bosing).
5. Vanilla js faqat bilan< 200 lines of code (basically it’s just adds/removes classes).

Ushbu o'ralgan soch turmagi sof JS va CSS (kutubxonalarsiz) bilan bog'langan.
Viktor Belozyorov tomonidan yaratilgan
2016 yil 3 sentyabr

Pokemon dizayni bilan slayder animatsiyasi.
Pham Mikun tomonidan yaratilgan
2016 yil 18 avgust

Murakkab animatsiya va yarim rangli burchakli matnga ega HTML, CSS va JavaScritp slayderi.
Ruslan Pivovarov tomonidan yaratilgan
2016 yil 13 iyul

HTML, CSS va JavaScript bilan slayder parallaks effekti.
Manuel Madeyra tomonidan yaratilgan
2016 yil 28 iyun

Replika effektiga ega HTML, CSS va JavaScript slayderi.
Pedro Kastro tomonidan yaratilgan
2016 yil 21 may

HTML, CSS va JavaScript bilan Clip-Path ochuvchi slayder.
Nikolay Talanov tomonidan yaratilgan
2016 yil 16 may

GSAP+ Silliq slayder oldingi/keyingi slaydlarni oldindan ko'rish bilan.
Karlo Videk tomonidan yaratilgan
2016 yil 27 aprel

HTML, CSS va JavaScript to'liq sahifali slayder.
Jozef Martucci tomonidan yaratilgan
2016 yil 28 fevral

HTML, CSS va JavaScript bilan to'liq slayder prototipi.
Gluber Sampaio tomonidan ishlab chiqarilgan
2016 yil 6 yanvar

Greensocks TweenLite/Tweenmax bilan to'liq ekranli, sezgir, animatsiyali slayd-shou.
Arden tomonidan yaratilgan
2015 yil 12 dekabr

HTML, CSS va JavaScript bilan to'liq ekranli slayder (GSAP Timeline) #1.
Diako M.Lotfollahi tomonidan tayyorlangan
Endi Tran tomonidan yaratilgan

Maxsus effektlarga ega HTML va CSS slayderi.
Nikolay Talanov tomonidan yaratilgan
2015 yil 12 noyabr

HTML, CSS va JavaScript bilan parallaksli to'liq ekranli drag-slayder.
Nikolay Talanov tomonidan yaratilgan
2015 yil 12 noyabr

Kontseptsiyaning isboti aylanadigan slayder. Qo'shimcha yordam uchun klip-yo'l va ko'plab matematika.
Tayler Jonson tomonidan yaratilgan
2015 yil 16 aprel

TranslateX va translate3d silliqligidan foydalangan holda oddiy to'liq ekranli CSS va jQuery slayderi!
Jozef tomonidan yaratilgan
2014 yil 19 avgust

Javob beruvchi slayderlar

Tegishli maqolalar

Rasmlar shaffofligi slayderi

HTML va CSS-da tasvirlarning shaffofligi slayderi.

Mos brauzerlar: Chrome, Edge, Firefox, Opera, Safari

Radio kirishlariga asoslangan oddiy slayder. 100% toza HTML + CSS. O'q tugmalari bilan ham ishlaydi.

Javob: ha

Tegishli maqolalar

Yig'ilgan moslashuvchan slaydlar tartibi

Ushbu misol slaydlarning barcha boshqalarga mos keladigan o'lchamlarini yaratadiganlarni ko'rsatadi (ayniqsa, kirish/chiqish uchun yig'ilganlar). Bu "ularning chuqurligi va tajovuzkorligini moslashtirmasdan aniqlanadi: mutlaq; natijada u butunlay moslashuvchan va oddiy sahifa oqimida saqlanishi oson.

Mos brauzerlar: Chrome, Edge, Firefox, Opera, Safari

Radio kirishlariga asoslangan oddiy slayder. 100% toza HTML + CSS. O'q tugmalari bilan ham ishlaydi.

Javob: ha

Tegishli maqolalar

Javob beruvchi slayder

HTML, CSS va JavaScript-da animatsion sezgir slayder.

Mos brauzerlar: Chrome, Edge, Firefox, Opera, Safari

Radio kirishlariga asoslangan oddiy slayder. 100% toza HTML + CSS. O'q tugmalari bilan ham ishlaydi.

Bog'liqliklar: animate.css

Tegishli maqolalar

Niqoblangan matnli slayder

CSS shunchaki niqoblangan matnli slayderdir.

Mos brauzerlar: Chrome, Edge (qisman), Firefox, Opera, Safari

Radio kirishlariga asoslangan oddiy slayder. 100% toza HTML + CSS. O'q tugmalari bilan ham ishlaydi.

Javob: ha

Tegishli maqolalar

Parallaks effektli tasvir va tarkib.

Tegishli maqolalar

Faqat CSS slaydlar galereyasi.

Mos brauzerlar: Chrome, Edge, Firefox, Opera, Safari

Radio kirishlariga asoslangan oddiy slayder. 100% toza HTML + CSS. O'q tugmalari bilan ham ishlaydi.

Javob: ha

Tegishli maqolalar

Sof HTML/CSS slayder

Dumaloq SVG taraqqiyot satriga ega sof HTML/CSS slayderi.

Mos brauzerlar: Chrome, Edge (qisman), Firefox (qisman), Opera, Safari

Radio kirishlariga asoslangan oddiy slayder. 100% toza HTML + CSS. O'q tugmalari bilan ham ishlaydi.

Bog'liqlar: font-awesome.css

Tegishli maqolalar

Faqat CSS-dan foydalangan holda va rasmlarning nisbatlarini saqlab qolgan holda eskizlar bilan to'liq sezgir vertikal slayder yaratish uchun tajriba o'tkazing.

Tegishli maqolalar

Vanilla JavaScript bilan yaratilgan oddiy Flexbox tasvir slayderi/karusel.

Tegishli maqolalar

Bu slaydni har safar almashtirilganda harakatni xiralashtirish effektini simulyatsiya qiluvchi tajriba. Bu SVG Gaussian Blur filtri va CSS kalit kadrlari animatsiyasining afzalligi. Aksariyat natijalar Javascriptning yaxlit ishlashini talab qilmaydi, bu holda Javascript faqat slayder funksiyasi uchun ishlatiladi.

Tegishli maqolalar

JS bilan ajoyib animatsiya slayderi.

Tegishli maqolalar

Bu SVG naqshlari faqat CSS slayderi uchun niqoblangan tasvirlarni yaratishga qanday yordam berishi haqidagi tajriba.

Ba'zi slayder o'tishlarini o'rganish. Parallaks opsiyasi yoqilgan slayder. CSS filtrlari bilan o'ynash ajoyib.
Mirko Zorić tomonidan yaratilgan
2017 yil 12 iyun

Ba'zi nozik oraliq animatsiyalarga ega oddiy GSAP slayderi.
Goran Vrban tomonidan yaratilgan
2017 yil 9 iyun

HTML, CSS va JavaScript bilan Slider UI.
Mergim Ujkani tomonidan tayyorlangan
2017 yil 6 iyun

Slayder GSAP 2.
Em An tomonidan yaratilgan
2017 yil 4 may

Oddiy qo'shish sinf bitimi yordamida bir oz slicey o'tish slayder. Mobil qurilmalar uchun qisqa qurilmalarda jang va g'alabani chuqur ko'ring (shunchaki stack qiling, teginish hodisalarini qo'shing, tasvirlarni to'liq ko'rish maydoniga aylantiring va hokazo. Tasvirlarni ko'rish oynasini to'ldirish uchun aylantirish g'ildiragi (aylantirish tugmalari), navbat tugmalari va o'q tugmalarini qo'llab-quvvatlaydi. ularning ko'rinmas holatida, bu ham juda salqin.
Animatsiyani oshirish uchun Tezlik va Tezlik effektlari (UI to'plami) yordamida keyingi o'zaro ta'sir. Animatsiya strelka tugmachalari, navbatni bosish yoki aylantirish uyasi orqali ishga tushiriladi. Ushbu versiya o'zaro ta'sirning bir qismi sifatida chegaralarni o'z ichiga oladi.
2017 yil 3 yanvar

Ijodiy animatsiya effekti uchun CSS chegara-tasvir va klip-yoʻldan foydalanilgan.
Emily Hayman tomonidan yaratilgan
2016 yil 31 dekabr

Flexbox bilan qurilgan kichik slayder. Aktyorlik, kim tasdiqlaydi va sehrgarning pastki qismida sobit elementlar bo'lishi mumkin.
Robert tomonidan yaratilgan
2016 yil 28 noyabr

HTML, CSS kanvas slayderi.
Nvagelis tomonidan ishlab chiqarilgan
2016 yil 29 oktyabr

HTML, CSS va JavaScript 3D silliq slayder.
Eduardo Allegrini tomonidan yaratilgan
2016 yil 19 oktyabr

Sprinkles bilan HTML va CSS cupcake slayder!
Jeymi Koulter tomonidan yaratilgan
Dadli Stori tomonidan yaratilgan

Mario Maselli tomonidan yaratilgan
2016 yil 12 oktyabr

HTML, CSS va JavaScript bilan UI animatsiyasi №2 o'rganilmoqda.
Mario Maselli tomonidan yaratilgan
2016 yil 22 sentyabr

HTML, CSS va JavaScript bilan UI animatsiyasi №3 o'rganilmoqda.
Mario Maselli tomonidan yaratilgan
2016 yil 22 sentyabr

HTML, CSS va JavaScript bilan elektron tijorat Slider v2.0.
Pedro Kastro tomonidan yaratilgan
2016 yil 17 sentyabr

HTML, CSS va JavaScript egri fon bilan toza slayder.
Ruslan Pivovarov tomonidan yaratilgan
2016 yil 13 sentyabr

HTML, CSS va JavaScript bilan №1 UI animatsiyasini o'rganish.
Mario Maselli tomonidan yaratilgan
2016 yil 8 sentyabr

Power CSS-ni bosing: Yuqoriga va pastga har bir o'rtadagi rasm va yorug'lik qutisi bilan sahifalangan slayder.
Kseso tomonidan ishlab chiqarilgan
2016 yil 15 avgust

Ikki marta ekspozitsiya - bu 2 xil tasvirni bitta rasmda birlashtirgan fotografiya texnikasi.
Misaki Nakano tomonidan yaratilgan
Ege Görgülü tomonidan yaratilgan

CSS3 xususiyat klipidan foydalangan holda slayder.
Pedro Kastro tomonidan yaratilgan
2016 yil 1 may

Javob beruvchi CSS slayderi.
Geekwen tomonidan yaratilgan
2016 yil 19 aprel

Bu to'g'ridan-to'g'ri tarjima qilib bo'lmaydigan chiroyli ma'noli so'zlarni ko'rsatadigan oddiy slayder tajribasi. Fokus: nafis tipografiya va oddiy, ammo jozibali o'tishlar.
Jo Garri tomonidan yaratilgan
2016 yil 5 aprel

Animatsiya g'oyasi CSS klip yo'lining qiymatini o'zgartirish va shu bilan maskalash effektini yaratishdir.
Bhakti Al Akbar tomonidan yaratilgan
2016 yil 31 mart

HTML, CSS va JavaScript bilan nuqtali slayder.
Derek Nguyen tomonidan yaratilgan
2016 yil 16 mart

HTML, CSS va JavaScript bilan prizma effektli slayder.
Viktor tomonidan yaratilgan
2016 yil 12 mart

HTML, CSS va JavaScript bilan surma fon galereyasi.
Ron Gierlach tomonidan yaratilgan
2015 yil 30 noyabr

HTML, CSS va JavaScript slayder yechimi.
Yurgen Genser tomonidan yaratilgan
2015 yil 30 sentyabr

Sequence.js tomonidan boshqariladigan mahsulot slayderi. Sequence.js - noyob slayderlar, taqdimotlar, bannerlar va boshqa bosqichma-bosqich ilovalarni yaratish uchun javob beruvchi CSS animatsiya ramkasi.
Ian Lunn tomonidan yaratilgan
2015 yil 15 sentyabr

Kichkina doira moslashtirilgan slayder.
Bram de Xaan tomonidan yaratilgan
2015 yil 11 avgust

HTML, CSS va JavaScript bilan javob beruvchi GTA V slayderi.
Eduard Mayer tomonidan yaratilgan
2014 yil 24 yanvar

Bu slayderga o'xshaydi, lekin noma'lum sabablarga ko'ra kub shaklida aylanadi.
Erik Brewer tomonidan yaratilgan
2013 yil 4 dekabr

Hugo DarbyBrown tomonidan yaratilgan
2013 yil 28 avgust

Oddiy slayderlar

HTML, CSS va vanil JavaScript bilan tasvirni qoplash slayderi.
Yugam tomonidan ishlab chiqarilgan
2017 yil 7 iyun

HTML va CSS xususiyatli tasvir slayderi.
Joshua Xibbert tomonidan yaratilgan
2016 yil 16 iyun

Ko'p o'qli tasvir slayderi

HTML, CSS va JavaScript bilan ko'p o'qli tasvir slayderi.
Burak Can tomonidan tayyorlangan
2013 yil 22 iyul

Kub slayderi, shuningdek, HTML5/CSS3 3D konvertatsiyalari bilan kichik tajriba.
Ilya K tomonidan tayyorlangan.
2013 yil 26 iyun

Ushbu qo'llanmada biz ajoyib CSS3 slayderini yaratdik. Slaydlar orasidagi pasayishning ta'siri ayniqsa sezilarli. Dodatkovo teri tasvirini tasvirlash uchun ishlatilishi mumkin. Ma'lumotlaringizni tartibga solish uchun tartibsiz ro'yxat mavjud. Slaydlar avtomatik ravishda qo'shimcha CSS3 animatsiyasi bilan remikslanadi.

HTML tartibi

HTML tartibi juda oddiy. Ilovada bir nechta slaydlar mavjud. Ularning terisi rasm (fon sifatida) va div elementidagi matn tavsifidan iborat. Siz shunchaki qo'shimcha slaydlarni kiritishingiz mumkin.

CSS

Slayder uchun animatsiyalar CSS3 anim_slides va anim_titles. Avvalo, bu slaydlar haqida, ikkinchisi esa tavsif matni uchun. Tavsif uchun pozitsiya va tushuncha ham o'zgaradi.

/* Slayder */ .slaydlar (balandlik: 300px; chekka: 50px avtomatik; toʻlib-toshish: yashirin; joy: nisbiy; kenglik: 900px; ) .slides ul (roʻyxat uslubi: yoʻq; joy: nisbiy; ) /* Animatsiya ramkalari # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( shaffoflik: 0; ) 6% ( shaffoflik: 1; ) 24% ( shaffoflik: 1; ) 30% ( shaffoflik: 0; ) 100% ( shaffoflik: 0; ) ) @-moz-keyframes anim_slides ( 0% ( shaffoflik: 0; ) 6% ( shaffoflik: 1; ) 24% ( shaffoflik: 1; ) 30% ( shaffoflik: 0; ) 100% ( shaffoflik: 0; ) ). slaydlar ul li (shaffoflik: 0; joy: mutlaq; yuqori: 0; /* animatsiya css3 */ -webkit-animation-nomi: anim_slides; -webkit-animation-davomiyligi: 24.0s; -webkit-animation-timeing-funktsiyasi: linear;-webkit-animation-iteration-count: infinite; -webkit-animation-state: run; -moz-animation-davomiyligi: 24.0s; -moz-animation-yo'nalishi: normal; -moz-animation-play-state: moz-animation-fill-mode: forwards ) /* css3 renderings */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-kechikish: 6,0 s; -moz-animation-kechikish: 6,0 ; .slides ul li:nth-child(4) div ( -webkit-animation-kechikish: 18,0 s; -moz-animation -kechikish: 18.0s; ) 5% (chapda:10%; shaffoflik:1; ) 20% (chapda:10%; shaffoflik:1; ) 25% (chapda:100%; shaffoflik:0; ) 100% (chapda:100%; shaffoflik:0; ) ) @-moz-keyframes anim_titles ( 0% (chapda:100%; shaffoflik:0; ) 5% (chapda:10%; shaffoflik:1; ) 20% (chapda:10%; shaffoflik:1; ) 25% (chapda:100%; shaffoflik:0; ) 100% (chap:100%; shaffoflik:0; ) ) .slides ul li div (fon rangi:#000000; chegara radiusi:10px 10px 10px 10px; FFF; shrift oʻlchami:26px; chap: 10%; hoshiya :0 auto; width:200px; animatsiya-yo'nalish: normal; iteratsiya soni: cheksiz; -moz-animatsiya-yo'nalishi: normal -moz-animatsiya-kechikish: 0; -moz-animation-play-state: yugurish; -moz-animatsiya-to'ldirish rejimi: oldinga; )

Agar siz saytingizga aniq JQuery slayderini qo'shishingiz kerak bo'lsa, unda ushbu maqolada siz kerakli plaginlarning tavsifini topasiz. JQuery JavaScript-ni to'liq almashtirganiga qaramay, veb-dizayn jarayonini tezlashtirish uchun biz hali ham plaginlarga muhtojmiz.

Biz ushbu plaginlarning harakatlariga o'zgartirishlar kiritishimiz va saytimiz maqsadlariga yaxshiroq mos keladigan yangi slayderlarni yaratishimiz mumkin.

Boshqa slayderlar uchun slayderdan bir vaqtning o'zida paydo bo'ladigan slaydlarni o'zgartirish uchun sarlavhalar, rasmlar qo'shishingiz va effektlarni tanlashingiz kifoya. Ushbu plaginlarning barchasi qo'llab-quvvatlovchi hujjatlar bilan birga keladi, shuning uchun ularga yangi effektlar yoki funktsiyalarni qo'shish katta ish emas. JQuery ijro dasturi yordamida skriptga kiritilgan triggerlarni ham o'zgartirishingiz mumkin.

Qolgan tendentsiyalar, masalan, sezgir dizayn, plagin yoki skriptni amalga oshirishingizdan qat'i nazar, veb-loyihalar uchun yanada muhimroqdir. Bu elementlarning barchasi ushbu plaginlardan terini olib tashlaydi, bundan ham yomoni. 2014 yilda sodir bo'lgan barcha voqealar ushbu ro'yxatga kiritilgan.

jQuery slayder tasviri

Jssor sezgir slayder

Men yaqinda bu jQuery slayderidan foydalandim va u o'z ishini juda yaxshi bajarayotganini darhol angladim. Ochiq slayder chiqish kodi yordamida kengaytirilishi mumkin bo'lgan cheksiz imkoniyatlar mavjud:

• Moslashuvchan dizayn;
• 15 dan ortiq sozlamalar parametrlari;
• 15 dan ortiq tasvirni o'zgartirish effektlari;
• Rasmlar galereyasi, karusel, to'liq ekran o'lchamini qo'llab-quvvatlash;
• Vertikal banner rotatori; slaydlar ro'yxati;
• Video qo'llab-quvvatlash.

Demo | jalb qilish

PgwSlider - JQuery/Zepto asosidagi moslashuvchan slayder

Ushbu plaginning vazifalaridan biri rasmlarning slaydlarini namoyish qilishdir. Bu yanada ixchamroq, chunki jQuery fayllari hajmi atigi 2,5 KB ni tashkil etadi, bu esa uni samarali ravishda kengaytirish imkonini beradi.

• Moslashuvchan tartib;
• SEO optimallashtirish;
• Turli xil brauzerlarni qo'llab-quvvatlash;
• Faqat rasmga o'ting;
• Arxiv hajmi 2,5 KB dan kam.

Demo | jalb qilish

JQuery Vertikal Yangiliklar Slayderi

Kichik va jigarrang jQuery-slayder, chap tomondan nashrlar oqimi va o'ng qo'lda ko'rsatilgan tasvirlar bilan yangi resurslar uchun topshiriqlar:

• Moslashuvchan dizayn;
• Yangi elementlarning vertikal ustuni;
• Kengaytirilgan sarlavhalar.

Demo | jalb qilish

Wallop slayderi

Ushbu slayder JQuery-ga o'xshamaydi, lekin shuni ta'kidlashni istardimki, u yanada ixcham va sizning sahifalaringiz ko'rsatiladigan vaqtni butunlay o'zgartirishga imkon beradi. Menga nimaga loyiqligingizni ayting:

• Moslashuvchan tartib;
• Oddiy dizayn;
• Slaydlarni o'zgartirish uchun turli xil variantlar;
• Minimal JavaScript kodi;
• Hajmi atigi 3 KB.

Demo | jalb qilish

Yassi uslubdagi Polaroid galereyasi

Ixcham joylashuvi va zamonaviy dizayni bilan stol ustiga sochilgan hujjatlar uslubidagi galereya sizning e'tiboringizni jalb qilishi mumkin. Planshetlar va katta displeylar uchun ko'proq mos keladi:

• Moslashuvchan slayder;
• Yassi dizayn;
• Vipadkova slaydlarni o'zgartirish;
• Chiqish kodiga yangi kirish.

Demo | jalb qilish

A-slayder

Demo | jalb qilish

HiSlider – HTML5, jQuery va WordPress tasvir slayderi

HiSlider yangi, bepul jQuery slider plaginini taqdim etdi, bu sizga ajoyib o'tishlarga ega turli xil tasvir galereyalarini yaratishga imkon beradi:

• Moslashuvchan slayder;
• Dasturlash bilimini talab qilmaydi;
• O'nlab ajoyib shablonlar va terilar;
• Garni o'tish effektlari;
• Turli platformalarni qo'llab-quvvatlash;
• WordPress, Joomla, Drupaldan barqarorlik;
• Kontentni ko'rsatish imkoniyati turli xil turlari: rasm, YouTube video va Vimeo video;
• Gnuchkaning kayfiyati bor;
• asosiy qo'shimcha funktsiyalar;
• Tanlangan tarkibning mazmuniga mos kelmaslik.

Demo |

Voy slayder

WOW slayder javob beruvchi jQuery- slayder ajoyib vizual effektlar bilan tasvir ( domino, burilish, rozmittya, inqilob va shpallar, burilish, panjurlar) va professional andozalar.

WOW Slider o'rnatish ustasi bilan birga keladi, bu sizga kodni tushunmasdan yoki tasvirlarni tahrirlamasdan bir necha soniya ichida ajoyib slayderlarni yaratishga imkon beradi. Joomla va WordPress uchun plagin versiyalari ham yuklab olish mumkin:

• Umumiy moslashuvchanlik;
• Barcha brauzerlar va barcha turdagi qurilmalarni qo'llab-quvvatlash;
• Qo'llab-quvvatlash sensorli qurilmalar;
• WordPress-da oson o'rnatish;
• Yaxshi moslashtirilgan ayolning jirkanchligi;
• SEO optimallashtirish.

Demo |

Nivo Slider – bepul jQuery plagini

Nivo Slider eng chiroyli va eng oddiy tasvir slayderi sifatida keng tanilgan. Nivo Slider plagini bepul va MIT litsenziyasi ostida chiqariladi:

• JQuery 1.7 va undan yuqori versiyalari talab qilinadi;
• Zo'r o'tish effektlari;
• O'nglangan kichkintoyni kechiring;
• ixcham va moslashuvchan;
• Ochiq kod;
• Bostirish va kechirish;
• Turli shablonlarning yorlig'i;
• Rasmni avtomatik kesish.

Demo |

Texnik hujjatlarga ega oddiy jQuery slayderi

Ushbu g'oya Apple kompaniyasining slayderlaridan ilhomlangan bo'lib, unda bir qancha kichik elementlar turli animatsiya effektlari bilan suzishi mumkin. Chakana sotuvchilar ushbu kontseptsiyani minimal afzalliklarga ega bo'lgan onlayn-do'kon uchun oddiy dizaynni yaratishga harakat qilishdi, unda elementlar turli toifalarda "uchib ketadi":

• Moslashuvchan tartib;
• Minimalist dizayn;
• Slaydlarni almashtirishda turli effektlar paydo bo'lishi mumkin.

Demo |

To'liq o'lchamli jQuery tasvir slayderi

Sahifaning kengligining 100% ni egallagan va mobil qurilmalar ekranlarining o'lchamiga mos keladigan juda oddiy slayder. U CSS o'tishlari bilan ishlaydi va tasvirlar langarlar bilan birga "yotqiziladi". Agar siz uni yuborilgan rasmga biriktirishni istamasangiz, langar almashtirilishi yoki olib tashlanishi mumkin.

Slayder o'rnatilgandan so'ng, u ekran kengligining 100 foizida miltillaydi. Shuningdek, siz slayd tasvirlarining hajmini avtomatik ravishda o'zgartirishingiz mumkin:

• Moslashuvchan JQuery slayderi;
• To'liq o'lcham;
• Minimalist dizayn.

Demo |

Elastik kontent slayderi + qo'llanma

Elastik Content Slider avtomatik ravishda asl elementning o'lchamlariga muvofiq kenglik va balandlikni moslashtiradi. Bu oddiy jQuery slayderidir. U yuqoridagi slayd zonasidan va pastdagi navigatsiya yorlig'i panelidan iborat. Slayder o'zining kengligi va balandligini asl idishning o'lchamlariga moslashtiradi.

Kichkina diagonal ekranlarda ko'rilganda, navigatsiya yorliqlari kichik piktogrammalarga aylanadi:

• Moslashuvchan dizayn;
• Sichqonchani bosish orqali aylantiring.

Demo |

Bepul 3D Stack Slider

Tasvirlarni 3D formatida yoqib yuboradigan eksperimental slayder. Ikkita to'plam qog'ozning qiymatini ko'rsatadi, shuning uchun tasvir o'chirilganda u slayderning markazida ko'rsatiladi:

• Moslashuvchan dizayn;
• Qaytib o'tish;
• 3D effektlar.

Demo |

JQuery va CSS3 + kalit so'zlariga asoslangan Fullscreen Slit Slider

Slayderdan slayderni qanday yaratishni o'rganasiz: g'oya tasvirning old yoki old qismini ochganda, oqayotgan slaydni shu tarzda "kesish" va ko'rsatishdir. JQuery va CSS animatsiyasidan foydalanib, biz noyob o'tish effektlarini yaratishimiz mumkin:

• Moslashuvchan dizayn;
• Split o'tish;
• To'liq ekranli slayder.

Demo |

Unislider - juda kichik jQuery slayderi

Keraksiz qo'ng'iroqlar va hushtaklar va tartiblar yo'q, hajmi 3 KB dan kam. Slaydlaringiz uchun istalgan HTML kodini vikorize qiling, uni kengaytiring Men sizga CSS bilan yordam beraman. Unslider bilan bog'liq barcha narsalar GitHub-da joylashgan:

• Turli xil brauzerlarni qo'llab-quvvatlash;
• Klaviaturani qo'llab-quvvatlash;
• Balandlikka qarab sozlash;
• Moslashuvchan dizayn;
• Sensorli kirishni qo'llab-quvvatlash.

Demo | jalb qilish

Minimal sezgir slaydlar

Kechirasiz, ixcham plagin ( Hamma narsaning hajmi 1 KB), bu moslashtiruvchi slayderni, idishning o'rtasida vikory elementlarini yaratadi. ResponsiveSLides.js ko'p sonli brauzerlar, jumladan IE ning IE6 va undan yuqori versiyalari bilan ishlaydi:

• Umumiy moslashuvchanlik;
• Hajmi 1 KB;
• CSS3 JavaScript orqali ishga tushirilishi mumkin;
• Belgilangan ro'yxatlardan oson belgilash;
• O'tish effektlarini sozlash qobiliyati va bitta slaydni ko'rishda qiyinchiliklar;
• Bir nechta slayd-shoularni yaratish qobiliyatini qo'llab-quvvatlaydi;
• Avtomatik va qo'lda aylantirish.

Demo |

Kamera - bepul jQuery slayderi

Kamera - bu uzluksiz o'tish effektlari va moslashuvchan tartibga ega plagin. Bunga ko'nikish oson, mobil qurilmalardan foydalaning:

• To'liq moslashuvchan dizayn;
• Imzolar;
• Video qo'shish imkoniyati;
• 33 xil rangdagi piktogramma.

Demo |

SlidesJS, sezgir jQuery plagini

SlidesJS - sensorli qurilmalar va CSS3 o'tishlari qo'shilgan JQuery (1.7.1 va undan yuqori) uchun moslashtirilgan plagin. U bilan tajriba o'tkazing, loyihangizga SlidesJS qo'shishni o'rganishga yordam beradigan bir qator tayyor ilovalarni sinab ko'ring:

• Moslashuvchan dizayn;
• CSS3 -go;
• Sensor qurilmalarni qo'llab-quvvatlash;
• Kechirasiz.

Demo | jalb qilish

BX JQuery Slider

Bu xarajatsiz moslashuvchan JQuery slayderi:

• To'liq moslashuvchan - har qanday qurilmaga moslashish;
• Slaydlarning gorizontal, vertikal o'zgarishi;
• Slaydlar tasvirlar, videolar yoki HTML mazmunini o'z ichiga olishi mumkin;
• Sensor qurilmalar uchun kengaytirilgan qo'llab-quvvatlash;
• Slayd animatsiyalari uchun foydali CSS o'tishlari ( apparat);
• Gateway API va umumiy usullar;
• Kichik fayl hajmi;
• Amalga oshirish uchun uzr.

Demo |

FlexSlider 2

Eng chiroyli moslashuvchan slayder. Yangi versiya robot tezligini va uning ixchamligini oshirish uchun yanada takomillashtirildi.

Demo | jalb qilish

Galleria - JavaScript-ga asoslangan sezgir fotogalereya

Galleria rasmlar galereyasini yaratish uchun millionlab saytlarda namoyish etiladi yuqori kuch. Uning ishi haqida ijobiy sharhlar soni juda ko'p:

• To'liq mushuksiz;
• To'liq ekran rejimi;
• 100% moslashuvchan;
• Dasturlashning qo'shimcha isboti talab qilinmaydi;
• iPhone, iPad va boshqa sensorli qurilmalarni qo'llab-quvvatlash;
• Flickr, Vimeo, YouTube va boshqalar;
• Dekilka mavzular.

Demo | jalb qilish

Blueberry - oddiy javob beruvchi jQuery tasvir slayderi

Men sizga javob beruvchi veb-dizayn uchun maxsus yozilgan JQuery tasvir slayderini taqdim etaman. Blueberry - bu moslashuvchan shablonlar bilan ishlash uchun maxsus yozilgan ochiq kodli eksperimental tasvir slayder plaginidir.

Listoppad 4, 2019 yil Post yangilandi

Yuriy Nimetz

Slayder yoqilgan toza CSS+ bonusli slayder

CSS slayderlari Javascript slayderlaridan ancha ustundir. Ushbu afzalliklardan biri - jalb qilishning moslashuvchanligi. Katta o'lchamdagi slayderlar uchun tasvirlar nafaqat (turli ekranlar uchun optimallashtirish yo'q), balki skriptlarni yaratish uchun ham yaxshi soat sarflanadi. Ale u statti Siz sof CSS yordamida ko'proq slayderlar yaratasiz.

Saytdagi slayderlar haqida nimalarni bilaman:

1. CSS3 tasvir slayderi

Slaydlar, radio tugmalar bo'ylab harakatlanish uchun ishlatiladigan CSS slayderi. Ushbu radio tugmalar slayder ostida joylashgan. Radio tugmalaridan tashqari, navigatsiya chap va o'ng strelkalar yordamida ishlaydi. Bunga rioya qilish uchun, tasvirlar bir vaqtning o'zida qayta tasavvur qilinganligi sababli, psevdo-sinflar vikorizatsiya qilinadi: tekshiriladi.

2. Eskizlar bilan CSS3 slayderli displey

Oldingi CSS slayderiga qo'shimcha ravishda, bu erda pastki qismdagi radio tugmalar o'rniga barcha tasvirlarning kengaytirilgan eskizlari mavjud bo'lib, ular rasm galereyasi yaratilganda ham qo'lda sodir bo'ladi. Tasvirlar boshqa effekt bilan o'zgaradi: ular asta-sekin kattalashadi.

3. CSS bilan galereya

Va CSS-dagi bu eksa slayderi sotiladigan sahifalar uchun juda mos keladi. Qoida tariqasida, ochilish sahifalarini ishlab chiqishda (sahifalarni sotish) ko'plab veb-ishlab chiquvchilar slayderni eng boshida joylashtiradilar, shunda birinchi ekranda (aylanmasdan) ushbu sahifada mavjud bo'lgan barcha imtiyozlarni darhol ko'rishingiz mumkin. . Bundan tashqari, bu slayder moslashuvchan, bu ham jim.

4. Hech qanday harakat qilmasdan CSS-da slayder

Darhol ta'kidlashni istardimki, bu slayder g'alaba xabari emas! Orqa fonda, bosh tasviri (slayd) yonida yana 2 ta slaydni ko'rishingiz mumkin. Noxush hid o‘zgacha olib tashlandi. Slaydlarni o'zgartirish chiroyli rejimda amalga oshiriladi: boshida ikkita slayd ochiladi va markaz slayd bo'lib, keyinchalik asosiy bo'ladi. Keyin slayd kattalashadi va boshqalarning oldiga qo'yiladi.

5. Javob beruvchi CSS3 slayderi

Boshqa moslashuvchan slayder, bu radio tugmalariga asoslangan. Ushbu slayder qanday ko'rinishiga hayron bo'ling turli xil qo'shimcha binolar ah - Siz brauzer oynasini mustaqil ravishda o'zgartirishingiz mumkin, yoki slayderning yon tomonida bosilgan turli xil qurilmalarning maxsus piktogrammalari mavjud, siz kompyuteringizda, planshetingizda yoki smartfoningizda ko'rinadigan slayderni olishingiz mumkin.

***BONUS Slayder***

Taqdim etilgan barcha slayderlardan tashqari, men sizni yana bittasi bilan xursand qilmoqchiman. Ushbu slayder tasvirlar galereyasini yaratish uchun juda mos keladi. Agar nima qilish kerakligini so'z bilan tushuntira olmasangiz, videodagi hamma narsani hayratda qoldirgan ma'qul:

Visnovok

Slayderlar yordamida siz tasvir galereyalarini chiroyli tarzda loyihalashingiz, ularni yanada ixchamroq joylashtirishingiz, slayderni sotayotgan sahifangizning birinchi ekraniga (sahifaning aylantirmasdan ko'rish mumkin bo'lgan qismi) joylashtirishingiz va darhol asosiyni ko'rsatishingiz mumkin. olib qo'yilgan foyda. Slayderlarni muzlatishning ko'plab usullarini topishingiz mumkin, ammo bir narsa aniq - ular to'g'ri ishlatilganda hidlanadi.

Statistik ma'lumotlar tomonidan tekshirilgan ballar.