Faqat HTML va CSS yordamida vikorist karuselni qanday yaratish mumkin. HTML va CSS yordamida vikorist karuselni qanday yaratish mumkin CSS-da oddiy karusel
Yaxshi. Ushbu maqolada men ajoyib engil jQuery slayder/karuselini joylashtiraman. Tasvir aylantirilganda karusel 3D effektiga ega bo'lishi mumkin. Markaziy fotosurat kattaroq kengayishga ega va tasvir markazdan qanchalik uzoqda bo'lsa, kengaytmada shunchalik kamroq va shaffoflik kattaroq bo'ladi.
Karusel hech qanday uslubga ega emas, shuning uchun siz CSS fayllarini tozalashingiz shart emas, siz osongina uslublaringizni qo'shishingiz mumkin. Slayderni o'rnatish ham oson.
jQuery karuselini veb-saytga joylashtirish
1. Arxivlarni oling
Birinchi marta arxivlarni ziplash va fayllarni arxivdan chiqarish kerak
2. Kerakli fayllarni serverga yuklang
Endi sizga papkalar kerak tasvirlarі js saytingizning ildiziga to'ldiring. Agar siz allaqachon papkalarni bilsangiz, fayllarni papkalarga o'tkazing, chunki ular ularda joylashgan.
3. Skriptlarni ulash
Shu jumladan jQuery kutubxonasi
karuselning ishi uchun mas'ul bo'lgan o'sha skript
shuningdek, skriptni sozlash
Hamma narsa tabiiy ravishda tegga kiritilgan
4. Pluggable uslublar
Bundan tashqari, siz kabi uslublarni belgilash kerak, hamma narsa uchun yaxshiroq, o'zgartirish, lekin karuselning asosiy versiyasi uchun sizga hid kerak. Xushbo'y o'qi:
Tana (shrift-family:Arial; font-size:12px; fon:#ededed; ) .example-desc (margin:3px 0; padding:5px; ) #karusel (kenglik:960px; hoshiya: 60px avtomatik; chegara:1px qattiq #222; balandlik: 300px; pozitsiya: nisbiy; aniq: har ikkisi; toshib ketish: yashirin; * aks holda bu unchalik aniq emas ob'ektlarni bosish mumkin */ .callback-output (balandlik:250px; overflow:scroll; ) textarea#newoptions ( kengligi: 430px; ) .nav (kengligi: 80px; cheti: 20px avtomatik)
Uslublarni joylashtiring yoki allaqachon mavjud css fayli, lekin to'g'ridan-to'g'ri
, ularni o'rab olish5. Karuselning html kodini joylashtiring
Xo'sh, men yilning qolgan qismi: kiritilishi mumkin html kodi u yerda quvnoqlar, de wanto vv bachiti.
jQuery 3D karuseli yoqilgan va agar siz hamma narsani to'g'ri bajargan bo'lsangiz, u ishlamaydi. Hech narsa bo'lmagandek, js-skriptlarning barcha yo'llarini va skriptlarning mumkin bo'lgan to'qnashuvlarini qayta tiklashingiz kerak. Hamma bilan ko'rishguncha
Bugungi kunda slayder - karusel - bu biznes sayti, portfel sayti yoki boshqa manbalar uchun zarur bo'lgan funktsionaldir. Bir qator gorizontal tasvir slayderlari, gorizontal karusel slayderlari har qanday veb-dizaynga yaxshi mos keladi.
Yana bir slayder sayt tomonining uchdan bir qismini egallashda aybdor. Bu erda slayder - o'tish effektlari va moslashuvchan sxemalar bilan g'alaba qozongan karusel. Elektron tijorat saytlarida slayder - boshqa nashrlarda yoki sahifalarda ko'p sonli fotosuratlarni namoyish qilish uchun karusel mavjud. Slayder kodini erkin sozlash va kerak bo'lganda o'zgartirish mumkin.
JQuery-ni HTML5 va CSS3 bilan birgalikda ishlatib, siz o'z sahifalaringizni bosish orqali yaratishingiz, ularni noyob effektlar bilan ta'minlashingiz va saytning ma'lum bir sohasiga hurmatni qaytarishingiz mumkin.
Slick - kundalik slayder plaginlari - karusellar
Slick - osongina kengaytirilishi mumkin bo'lgan jquery - plagin, chakana sotuvchilari qattiqlashtirilgan, ular barcha do'stlaringizni slayderga qondirishi mumkin. Ta'sirchan slayder - karusel mobil qurilmalar uchun "kafel" rejimida, ish stoli versiyasi uchun "tortish" rejimida ishlatilishi mumkin.
"O'chirish" ta'sirini yumshatish uchun "markazga yaqin rejim" imkoniyati, avtomatik aylantirish bilan tasvirni olish chizig'i. Funktsional yangilanishlar slaydlarni qo'shish va slaydlarni filtrlashni o'z ichiga oladi. Hammasi plaginni o'z qo'lingizdan kelganicha sozlaganingizga ishonch hosil qilish uchun.
Demo rejimi | foyda oling
Owl Carousel 2.0 - jQuery - sensorli qurilmalarda yozish imkoniyatiga ega plagin
Ushbu plaginning arsenalida yangi kelganlar uchun ham, ilg'or chakana sotuvchilar uchun ham mos bo'lgan ajoyib funktsiyalar to'plami mavjud. Tse yangilangan versiya slayder - karusel. Yogo fronti shunday nomlangan.
Slayder o'z omboriga ega bo'lishi va umumiy funksionallikni yaxshilash uchun plaginlarni ishlab chiqishi mumkin. Animatsiya, video tahrirlash, slayderni avtomatik ishga tushirish, chiziqni yuklash, balandlikni avtomatik tuzatish - Owl Carousel 2.0 ning asosiy xususiyatlari.
Qulay wiki plagini uchun sudrab olib tashlash funksiyasi yoqilgan mobil yordamchi binolar.
Plagin mobil qurilmalarning kichik ekranlarida ajoyib tasvirlarni ko'rsatish uchun ajoyib g'oyadir.
qo'llash | foyda oling
jQuery plagini Silver Track
Dosit kichik, lekin funksionallikka boy jQuery plagini, bu sizga slayderning yon tomoniga joylashtirish imkonini beradi - kichik yadroga ega va resurssiz saytni saqlamaydigan karusel. Plagin vertikal va gorizontal slayderlarni ko'rsatish, animatsiya va galereyadan tasvirlar to'plamini yaratish uchun ishlatilishi mumkin.
qo'llash | foyda oling
AnoSlide - ultra ixcham sezgir jQuery slayderi
Ultra ixcham jQuery slayderi - karusel, uning funksionalligi katta slayderga qaraganda ancha boy. Vin o'z ichiga oladi oldinga qayta ko'rib chiqish bitta rasm, karusel ko'rinishida bir qator tasvirlarni va sarlavhalarga asoslangan slayderni ko'rsatadi.
qo'llash | foyda oling
Owl Carousel - jquery slayder - karusel
Owl karusel - pidtrimkoydan slayder sensorli ekranlar va HTML kodida amalga oshirish oson bo'lgan sudrab tashlash texnologiyasi. Plagin eng qisqa slayderlardan biri bo'lib, u sizga maxsus tayyorlangan tartibsiz chiroyli karusellarni yaratishga imkon beradi.
qo'llash | foyda oling
3D galereya - karusel
Vikoristovu 3D - o'tish, CSS-ga asoslangan - uslublar va troch Javascript kodi.
qo'llash | foyda oling
TweenMax.js va jQuery bilan 3D karusel
Ajoyib 3D karusel. Ko'rinishidan, bu hali ham beta-versiya, shuning uchun men bir vaqtning o'zida bir nechta muammolarni aniqladim. O'zingizning slayderlaringizni sinab ko'rish va yaratishdan ko'rinib turibdiki - bu karusel juda yaxshi yordam beradi.
qo'llash | foyda oling
Bootstrap vikilarning karuseli
Yangi veb-saytingiz uchun bootstrap texnologiyasidan foydalangan holda sezgir slayder karusel.
qo'llash | foyda oling
Bootstrap bilan boshlash - Slider Framework - Moving Box Carousel
Portfel va biznes saytlari uchun eng ko'p so'rovlar. Ushbu turdagi karusel slayderi ko'pincha barcha turdagi veb-saytlarda namoyish etiladi.
qo'llash | foyda oling
Kichkina Circleslider
Tanqidiy rozmyru butun slayder u razdylnoy zdatnystyu ekranning ayrim turdagi bo'lsin, xo'jalik binolari qo'yish uchun tayyor. Slayderni aylana rejimida ham, karusel rejimida ham ishlatish mumkin. Kichkina doira ko'rinishlari bu turdagi boshqa slayderlarga muqobildir. Ê vbudovana pídtrimka operatsion IOS tizimlari bu Android.
Dumaloq rejimda slayder cicada ko'rinishiga erishishi mumkin. Drag va drop usulini qo'llab-quvvatlash amalga oshirildi va slaydlarni avtomatik aylantirish tizimi joriy etildi.
qo'llash | foyda oling
Tumbelina kontenti slayderi
Joriy saytga yo'naltiruvchi, moslashuvchan karusel tipidagi slayder. Har qanday qo'shimcha binolarda to'g'ri ishlaydi. Gorizontal va vertikal rejimlar bo'lishi mumkin. Yogo rozmír minimallashtirish 1 KB kamroq. Ultra ixcham plagin ham silliq o'tish imkonini beradi.
qo'llash | foyda oling
voy - slayder - karusel
Saytingiz uchun original slayderni yaratishga yordam beradigan 50 dan ortiq effektlar mavjud.
qo'llash | foyda oling
Javob beruvchi jQuery kontent slayderi bxSlider
Slayderning moslashuvini yaxshilash uchun brauzer oynasining o'lchamini o'zgartiring. Bxslider 50 dan ortiq moslashtirish opsiyalari bilan birga keladi va turli o'tish effektlari bilan o'zining funksionalligini namoyish etadi.
qo'llash | foyda oling
jKarusel
jCarousel - bu jQuery plagini bo'lib, rasmlaringiz ko'rinishini tartibga solishga yordam beradi. Bazadan osongina korystuvac karusel tasvirlarini yaratishingiz mumkin, bu dumba uchun ko'rsatkichdir. Slayder moslashuvchan va mobil platformalarda ishlash uchun optimallashtirilgan.
qo'llash | foyda oling
Scrollbox - jQuery plagini
Scrollbox - bu slayder yaratish uchun ixcham plagin - karusel yoki yashash uchun matn qatori. Asosiy funktsiyalar qatoriga sichqonchani olib kelganda pauza bilan vertikal va gorizontal aylantirish effekti kiradi.
qo'llash | foyda oling
dbpasKarusel
Oddiy slayder - bu karusel. Agar sizga shved plagini kerak bo'lsa - 100% ishonch hosil qiling. Slayder uchun zarur bo'lgan faqat asosiy funktsiyalar taqdim etiladi.
qo'llash | foyda oling
Flexisel: sezgir JQuery Carousel Slider plagini
Flexisel yaratuvchilari eski maktab jCarousel plaginidan mast bo'lib, uning nusxasini yaratib, diqqatini to'g'ri ish mobil va planshet qo'shimchalarida slayder.
Mobil qo'shimchalar ustida ishlashda sezgir Flexisel tartibi brauzer oynasining o'lchamiga yo'naltirilgan tartibga o'xshaydi. Flexisel vydmínno moslashish ekranlarda ishlash uchun, ham past va yuqori razdylnoyu zdatnystyu.
qo'llash | foyda oling
Elastislide - sezgir karusel slayderi
Elastislide ekran o'lchamiga juda mos keladi. Binoning qo'shiq maydoni uchun ko'rsatiladigan tasvirlarning minimal sonini belgilashingiz mumkin. Slayder sifatida yaxshi amaliyot - rasm galereyasidagi karusellar, vertikal aylantirish effekti bilan vikorist sobit trim.
dumba | foyda oling
Flex Slider 2
Vílny slayder Víd Woothemes. Eng yaxshi moslashuvchan slayderlardan biri sifatida haqli ravishda hurmat qilinadi. Plagin shablonlarning spratini tozalaydi va birinchi marta ishlayotganlar uchun, shuningdek, mutaxassislar uchun bir xil bo'ladi.
dumba | foyda oling
Ajoyib karusel
Amazing Carousel - sezgir jQuery tasvir slayderi. WordPress, Drupal va Joomla kabi anonim kontentni boshqarish tizimlarini qo'llab-quvvatlaydi. Shuningdek, Android va IOS va taxta variantlarini qo'llab-quvvatlaydi operatsion tizimlar hech qanday muammosiz íz sumísnistyu. Ajoyib karusel shablonlari slayderni vertikal, gorizontal va dumaloq rejimlarda sozlash imkonini beradi.
qo'llash | foyda oling
Shunday qilib, mavzu bir xil zazhdzhena tugatish uchun. Lekin baribir, foydali bo'lgan narsalarni bilish, ko'pincha muammosiz. Biz har qanday maxsus funksiyalar holda, kuchli to'plangan skriptlarni proponuyut kerak. Men plaginlar bilan allaqachon qo'ng'iroq qilaman.
Shunday qilib, men oddiy jQuery karuseliga o'z muqobilimni targ'ib qilmoqchiman.
Siz rasm karusel sifatida yutib olishingiz mumkin, shuning uchun karusel yangi yoki boshqa kontent =)
Men o'zimga ruxsat bergan yagona kichik qo'ng'iroqlar va hushtaklar, - tin karusel blokini urdi.
UPD: 07/06/2014
Keling, buni taxminan quyidagicha ko'rib chiqaylik:
DEMO Zavantage
Hujumkor ko'rishning tuzilishi:
Keling, uslublarni tavsiflaymiz:
Karusel (maksimal kenglik: 1080px; /* butun blokning kengligi */ chekka: 50px avto; kenglik:100%; ) vmíst, scho asosiy maydon doirasidan tashqariga chiqish uchun */ pozitsiyasi:nisbiy; ). -blok ( float: chap; /* barcha karusel elementlarini bir qatorga qo'ying */ kengligi: 250px; /* teri elementining kengligini o'rnating */ to'ldirish: 10px 10px 10px 0px; /* elementlar bir-biriga tegmasligi uchun ehtiyotkorlik bilan yuring. g'azablanmang */ ).carousel -block img( display:block; ) /**************** TUGMALAR ***********/ .karusel- tugma-chap a, .karusel-tugma-o'ng a( eni: 25px; balandlik: 36px; pozitsiya: nisbiy; tepa: 80px; kursor: ko'rsatgich; matn-bezatish: yo'q; ) . left.png); ) .karusel-tugmasi-o‘ng a( float: o‘ng; fon: url(../images/carousel-right.png); ) /**************** SOYA *** **** ****/ .shadow (box-soya: 0px 0px 10px rgba(0, 0, 0, 0.6); )
I, nareshti, buni qanday qilish mumkin:
// O'ng qo'l bilan o'q bilan ishlov berish $(hujjat).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel tugmasini bosing. (karusel ) ); falseni qaytaring; )); // Chap strelka bilan $(hujjat).on("click",".carousel-button-left",function()( var carusel = $(this).parents(".carusel"); left_carusel(karusel) ); falseni qaytaring; )); funktsiya left_carusel(carusel)( var block_width = $(carusel).find(".carusel-block").outerWidth(); $(carusel).find(".carousel-items .carusel-block").eq(- 1).clone().prependTo($(karusel).find(".karusel-elementlar")); $(karusel).find(".karusel-elementlar").css(("chap":"-" +block_width+"px"));$(karusel).find(".karusel-elementlar .karusel-blok").eq(-1).remove(); $(karusel).find(".karusel-elementlar" ).animate((chapda: "0px"), 200); ) funksiyasi right_carusel(carusel)( var block_width = $(carusel).find(".carusel-block").outerWidth(); $(karusel).find ("".carousel-items").animate((chapda: "-"+ block_width +"px"), 200, function()( $(karusel).find(".carousel-items .carousel-block") ) .eq(0).clone().apppendTo($(karusel).find(".karusel-elementlar")); $(karusel).find(".karusel-elementlar .karusel-blok").eq( 0 ) .remove(); $(karusel).find(".karusel-elementlar").css(("chap":"0px")); )); ) $(function() ( //Avtomatik aylantirish karuselini yoqish uchun quyidagi qatorni izohdan olib tashlang auto_right(".carousel:first"); )) // Avtomatik aylantirish funksiyasi auto_right(carusel)( setInterval(function()( agar ( ! $(karusel).is(".hover"))) right_carusel(carusel); ), 3000) ) // Kursni $(document).on("mouseenter", ".carousel", function() karuseliga olib boring. ( $(this).addClass("hover"))) // Kursor karuseldan olib tashlandi $(document).on("mouseleave", ".carousel", function()($(this).removeClass(" suring")))
Ko'rinib turibdiki, soyani olib tashlash mumkin. Va zastosuvannya uchun CSS-dagi asosiy blok va ichki bloklarning hajmini "aylantirish" uchun o'zgartirish kerak. Jarayonni aylanish jarayoni ham oson, shunda sharob avtomatik ravishda aylanadi (da ushbu maxsus turga, auto_right funksiyasini tez bosish haqida fikr bildirish kifoya). Oddiy galereyaning markazidan ishlash uchun, belgilangan vazifa doirasida zarur bo'lgan hamma narsa mumkin!
Bundan tashqari, karusel sxemasi ekran tartibiga to'g'ri moslashishi va kompyuter yoki noutbuk ekranida ham, planshetlar va smartfonlar ekranlarida ham to'g'ri ko'rsatilishi uchun dumbani ishora qilish moslashishi muhimdir.
Bittasi samarali usullar qulab tushayotgan animatsiya yaratish uchun veb-sayt tomonida koristuvachiv uchun hurmat. Animatsiya elementlari mahsulotingiz haqida odamlarga yaxshiroq tushunish va ko'rsatishga yordam beradi. Qolgan soatlarda ko'rinadigan panellar, shuningdek, rasmga o'tish yoki surishda paydo bo'ladigan boshqa bir qator effektlar katta mashhurlikni olib tashladi. Bundan tashqari, hid siz ko'rgan slayderlar, karusellar va panellarga o'xshaydi. Ushbu maqola yaratilish haqida gapiradi moslashuvchan slayder karusel turi, silliq avtomatik aylantirish effekti bilan.
Shu kuni yuzlab sharhlar ro'yxatda tayyor echimlar bo'yicha takliflar bilan taqdim etilgan bo'lib, ulardan ko'pi g'alaba qozonmaydigan shaxsiy bo'lmagan funktsiyalarni almashtirishni tasdiqlaydi, chunki ular slayderning samaradorligini sezilarli darajada kamaytiradi, shuningdek, saytning faolligini oshiradi. bir butun sifatida. Professional veb-chakana sotuvchilar allaqachon nalashtuvanni-da gnuchkalarni yaratishga kirishdilar dasturiy mahsulotlar, qo'shimcha kutubxonalar va plaginlar uchun past kirish chegarasi bilan. Xuddi shunday, bizning skriptimiz robotining vazifalari bor minimal foyda Bunday slayderni tashkil qilish uchun Funktsional robot sizga remikannya oralig'ini, tezlikni, shuningdek qo'shiq slaydni tanlashni o'rnatishga imkon beradi. Quyida slayderning o'zi ishlashini tartibga soluvchi bir qator perminnyhlar mavjud.
vaqt roʻyxati- slaydning silliqligi
vaqt ko'rinishi- namoyish vaqti
radiobut- navigatsiya uchun slayd ostidagi tugmalar. Rost qiymatini kiritish, yolg'onni tanlash uchun tugmalar paydo bo'ladi.
Va endi boshlaylik! Keling, o'sha faylni yarataylik index.htm
Berilgan kodda, yak mi Bachimo hech narsa yig'ib bo'lmaydi, slayder-o'rash bildiradi kuydiruvchi lager bu ekranning o'rtasida joylashgan slayderni ochadi. Parametr faol slayd rasmning o'lchamini o'rnating va rasmning balandligi vv dozhini uchun aniq. I slayder faol rasmni ko'rsating.
Keling, ushbu ochiq faylni yarataylik style.css va u erda yozing, menga rozet kerak bo'ladi:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); tana (rang: #4f4f5a; shrift oilasi: "Roboto", sans-serif; shrift o'lchami: 16px; to'ldirish: 0; chekka: 0; ) #slider-wrap( max-width:800px; chet: 0 auto; margin-top: 80px; ) #active-slide (kengligi: 100%; displey: jadval; joylashuv: nisbiy; ortiqcha: yashirin; -webkit-user-select: yo'q; -moz-user-select: yo'q; -ms- foydalanuvchi-tanlash: yo'q; -o-user-tanlash: yo'q; foydalanuvchi-tanlash: yo'q; to'ldirish: 0;-webkit-o'tish: 1s; -o-o'tish: 1s; o'tish: 1s; -out; o'tish vaqti- funksiya: osonlik bilan chiqish; ) .slide( width: calc(100%/4); roʻyxat uslubi: yoʻq; displey: inline; float: chap; ) .slide img (kenglik: 100%; ..Radio- But( margin-top:10px; text-align:center; ) -takrorlash; ) .Radio-But .ctrl-select:hover (kursor:pointer; fon-pozitsiya:markaz markazi; ) .Radio-But .ctrl-select .active ( fon-pozitsiya: markaziy tepa; ) #prewbutton, # keyingi tugma ( displey:blok;width:40px;height:100%;position:a bsolute;top:0;overflow:hidden;text-indent:-999px;fon:url("arrowBg.png") chap markaz takrorlanmaydi;shaffoflik:0,5 ; z-indeks:3; kontur:yo'q !muhim; ) #prewbutton (chapda:10px; ) #keyingi tugma (oʻngda:10px; keyingi tugma: kursorni koʻtarish (shaffoflik:1; )
Uslubda slayder-o'rash yozib qo'ying kengligi- rasmlaringizning maksimal uzunligi.
Uslubda #slayder (kengligi: hisob (100% * 4); )і .slide (kengligi: hisob (100%/4); ) slayderingizga rasmlar sonini kiriting. Masalan, í̈x 4.
Oldinga/orqa o'qlari slayderingizning ko'rinishiga ta'sir qilgani uchun ular ko'rinmas holga keltirilishi va kursorni ustiga olib borganingizda paydo bo'lishi mumkin. Qaysi parametrlar uchun oldindan Lekinі keyingi Lekin Quvvatning shaffofligini 0 ga o'rnating.
Endi biz ochilgan faylni yaratamiz slider.js, slayder kodi qaerda bo'ladi. jQuery kutubxonasini qo'shishni unutmang.
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = funktsiya(strelka)( clearTimeout(slideTime); if(arrow == "keyingi")( if(slideNum == slideCount) (slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(arrow == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + translateWidth + "px, 0)")); )else( slideNum = arrow; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("faol"); $(".ctrl-select").eq(slideNum - 1).addClass("faol"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function()( animSlide("keyingi"); return false; )) $("#prewbutton").click(funksiya) ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " "+indeks+""; }); $("
Funktsiya animSlide uch xil qiymatni tanlaydi: keyingi, oldingi, raqamli qiymat. Keyingi parametr keyingi slaydga o'tadi, oldingi slaydni oldindan aylantiradi va raqamli qiymat slaydning vazifalarini, slayd ostidagi radio tugmalari orqali tanlovlarni o'zgartirmaydi.
Taqdim etilgan slayderda https://pixabay.com/ veb-resursidagi rasmlar mavjud.
1. jQuery karuseli "clickCarousel"
Yangi mahsulotlarning aylanayotgan e'lonlari bilan bloklash. O'tish bloklari uchun o'qlar chap / o'ng qo'lda. Arxivda ikki kishilik karusel stilistik dizayn: yorug'lik va qorong'i.
1. jQuery karuseli, plagin "carouFredSel"
Yangi jQuery tasvir karuseli.
4. jQuery plagini: "Elastislide" karuseli
5. "TinyCarousel" plagini
jQuery in'ektsiyasidan olingan rasmlar karuselidagi kontent slayderlarini ko'ring. Namoyish tomonida, karuselni saytingizga qanday o'rnatish kerakligi tasvirlangan.
Plagin "Slider Kit", oson karusel bilan boshqacha tarzda aylantirish.
7. javascript karuseli
8. jQuery plagini "Grid Navigation Effects"
Tasvir eskizlari orasidagi original navigatsiya. Namoyish sahifasining o'ng tomonidagi effektni ko'rish uchun "Yuqoriga" va "Pastga" tugmachalarini bosing. Ushbu jQuery yechimida kursorni eskiz ustiga olib kelganda va sichqoncha g'ildiragi orqasida aylantirilganda effekt ham o'tkaziladi.
9. Oson karusel
10. "Easy Paginate" bloklaridan karusel
jQuery plagini "Easy Paginate". To'rtburchaklar blok - bu ro'yxatning asosiy elementi, agar uchta nuqtadan ko'p bo'lsa, slayderga o'xshash navigatsiyani tezlashtirish uchun kerak bo'lgan hamma narsani ko'rib chiqing (qo'shimcha o'qlar uchun "oldinga", "orqaga" va Quyidagi qo'shimcha navigatsiya tugmalari uchun).
11. Vertikal rotator "Vertical Ticker"
jQuery vertikal rotatori: kontentni avtomatik ravishda yon tomonga aylantiring. O'tkazilgan navigatsiya tugmalari, shuningdek aylanishni boshlash va uni qayta boshlash imkoniyati. Sichqonchani sichqoncha ustiga olib borganingizda ruh kuylaydi. HTML belgilash sahifasida aylanayotgan bloklar li ro'yxatining muhim elementlari bilan ifodalanadi.
12. Javascript CSS-ning aylantiriladigan maydoni
DIV konteyneriga joylashtirilgan maydon bo'ylab harakatlanish uchun "TinyScroller" javascript yechimi.
13. jQuery plagini "Smooth Div Scroll"
Qo'shiq maydonida gorizontal aylantirishni amalga oshirish uchun plagin. Sichqoncha kursorini mintaqaning chap yoki o'ng chetiga olib borganingizda, aylantirish boshlanadi.
Kontentli slaydlar o'rtasida navigatsiya qo'shimcha strelkalar yoki eskizni bosish uchun ishlatilishi mumkin. Quyida eskizlarni yoki slaydning to'liq tavsifini biriktirish / ko'rsatish imkonini beruvchi "Ko'rsatish" tugmasi mavjud.
15. "Circular Content Carousel" kontentni aylantiruvchisi
17. Scroller
Kursor ustiga kursor olib kelganingizda paydo bo'ladigan aylantiruvchi bilan blokirovka qiling. Bu sichqonchaning g'ildiragini aylanayotgan, xuddi tutun yordami uchun atrofida aylanish mumkin.
Shunga o'xshash jQuery yechimi Apple veb-saytidagi bunday ta'sir tufayli buzildi. Ushbu korporatsiyaning chakana sotuvchilari har doim butun dunyo bo'ylab veb-ustalar tomonidan qabul qilingan echimlar haqida bilishgan. Plaginni ko'rsatish uchun ro'yxatdagi istalgan toifadan tanlang.
19. Tez harakatlanuvchi slayder
Slayder avtomatik ravishda yaratiladi. Mahsulot nomi, tavsifi, tasvirning manzili, tasvirning manzili slider.db.txt faylidan olingan. G'olib bo'lgan texnologiyalar: CSS, PHP, jQuery.
20. jQuery Variantlari bilan Blok aylanish
Blokni aylantirish effektini ko'rish uchun demo tomonidagi kichik to'rtburchaklardan birini bosing
Kontentni aylantirish uchun plagin, masalan, ekranga o'tishingiz mumkin qolgan yangiliklar yoki saytda Twitter yillarini ko'rsatish uchun.
22. "Mijozlarning fikr-mulohazalari" dinamik bloki
Blok ichida avtomatik aylanish. G'olib bo'lgan texnologiyalar: PHP, XML, CSS, jQuery.
Ushbu plagin ro'yxat elementlarini (ul li) ga aylantiradi jQuery elementlari karusellar.
26. "ImageFlow" javascript karuseli
Sichqoncha g'ildiragi yordamida tasvirni aylantirish oson.
27. Tarkibni aylantirish
Saytdagi qolgan yoki yangi materiallar e'lon qilingan ixcham blok. Oxirgi ustunda qolgan yangiliklarning qisqacha e'lonlari ro'yxati ko'rsatiladi. Ulardan birini tanlashda o'ng ustun ko'proq ko'rsatiladi hisobot tavsifi nashrning to'liq matnini o'qishni talab qiladi. jQuery yordamida amalga oshirilgan.
Xabarlar bilan tasvir aylantiriladi, sichqonchani o'tish joyi ustiga olib borganingizda, navigatsiya paneli paydo bo'ladi. Ayiqni rasmga olib borganingizda, u boshqaruv tugmalari orasidagi nomni ham ko'rsatadi. Hatto yon tomondan chiroyli ko'rinadi
33. O'z o'rnida siljitish, Mootools plagini "Scrollbar"
yigiruv zdíysnyuêtsya smuga prokat yordam kelsak, shuning uchun sichqonchaning g'ildiragi yordam uchun.
