JQuery-da oddiy karusel.

Ishni optimallashtirish Plaginlar jQuery

-karusellar yanada jozibali ko'rinish uchun veb-saytlar o'rniga ularni ko'rsatishga imkon beradi.

Bunday plaginlar yordamida siz to'g'ridan-to'g'ri veb-sayt sahifalarida chiroyli taqdimotlar yaratishingiz va auditoriyangizning hurmatini qozonishingiz mumkin. 1. Bootstrap Ambilight Slider

Bootstrap Ambilight Slider

Plaginlar– qo‘shimcha yorug‘lik effekti va Bootstrap funksiyasi bilan slayderlar/karusellar yaratish uchun plagin. 2. jQuery TouchSwipe Carousel- plagin

Swipe Carousel

Sensorli ekrandagi tugmani bosish va sichqoncha tugmasini bosish imkonini beradi. 3.ItemSlide ItemSlide.js o'zi jquery.

4.

– ItemSlide.js- ish stoli kompyuterlarida ham, mobil qurilmalarda ham foydalanish mumkin bo'lgan karusel yaratish uchun plagin.

5.

sensorli qurilmalar ItemSlide.js-moslashuvchan karusellar/slayderlar yaratish uchun plagin Mobil qurilmalar uchun to'liq moslashtirilgan va optimallashtirilgan- karusellar. Plaginlar Animatsiya uchun bu yerda vikory dan foydalaning

CSS3

- o'ting yoki zaxira opsiyasini o'tkazing – Plaginlar.

Plagin har qanday turdagi kontentdan cheksiz miqdordagi slaydlarni qo'llab-quvvatlaydi.

klaviatura bilan o'zaro ta'sir qilmasdan va shuning uchun ko'pgina brauzerlarda, shu jumladan mobil brauzerlarda yaxshi ishlaydi. 6. SilverTrack SilverTrack-mumkin bo'lgan kengaytmali plagin.

U qo'lda plaginlar tanloviga ulanishi mumkin bo'lgan kichik yadrodan iborat.

7. Boyqush karuseli 2 Boyqush karuseli 2 Plaginlar- uchun to'liq moslashuvchan karusel jQuery/Zepto sensorli ekranlardan yordam uchun. 8. UtilCarousel UtilCarousel Mobil qurilmalar uchun to'liq moslashtirilgan va optimallashtirilgan- plagin - pullik amalga oshirilgan silliq o'tishli karusellar apparat tezlashuvi 7. Boyqush karuseli 2.

Vin butunlay moslashuvchan.

Plagin qo'llab-quvvatlaydi sensorli ekranlar Plaginlar, va yangi vikoristda trivimirna

-Uskuna tezlashuvi bilan animatsiya.

Ushbu plagin ish stoli kompyuterlarida ham, kompyuterda ham yaxshi ko'rinadi mobil qurilmalarі . Keruvati

Siz bosish, navigatsiya yoki sichqonchani harakatlantirish orqali yordam olishingiz mumkin.

9. Silliq Silliq

ê moslashuvchan

-karusel, bu erda sizga kerak bo'lgan hamma narsa. 10. CodingJack 3D Carousel Plaginlar-karusel, bu o'yinchining diqqatini qo'shiq aytayotgan ob'ektga qaratib, uni ekranning o'rtasiga qo'yadi.

13. Tikslus

Tikslus ustida to'liq moslashuvchi karusel hisoblanadi Plaginlar shaxsiy bo'lmagan funktsiyalar va vakolatlar bilan. Mobil qurilmalar uchun to'liq moslashtirilgan va optimallashtirilgan Plaginning yuqori moslashuvchanligi tasvir o'lchamlarini belgilamaslik imkonini beradi. Tikslus Bundan tashqari, bu etarli animatsiyaga asoslangan qo'llab-quvvatlashni anglatadi - Klasah..

plagin bilan vikoristdan foydalanishingiz mumkin

JQuery Mobile 14.Scrollbox Plaginlar Scrollbox

- Kechirasiz, miniatyura

- ro'yxatlarni karusel yoki ishga tushirish uchun qatorga aylantiruvchi plagin. 15. Sky Touch Carousel Plaginlar Sky Touch karusel - plagin- boy funktsiyalar to'plamiga ega karusellar plagin moslashuvchan, sensorli ekranlarni qo'llab-quvvatlaydi va ular bilan slayd muammosiz ishlaydi. Sozlamalar o'zgarishlarga ruxsat beradi.

16.

tashqi ko'rinish Plaginlar yordam uchun karusel

CSS

- gnuchky -slayd-shou va karusel yaratish uchun plagin. Siz osongina sozlashingiz mumkin, shu jumladan o'tish turlarini, tasvirni va ramka aralashtirish tezligini tekshirishingiz mumkin.

1. jQuery karuseli "clickCarousel"

Yangi mahsulotlarning aylanayotgan e'lonlari bilan bloklash.

Bloklarni aylantirish uchun chap/o'ng qo'l o'qlaridan foydalaning.

Arxivda ikki kishilik karusel bor

uslubiy dizaynlar

: yorug'lik va qorong'i. 1. jQuery karuseli, plagin "carouFredSel" JQuery yordamida toza, yangi karusel tasvirlari.

4. jQuery plagini: “Elastislide” karuseli

5. “TinyCarousel” plagini

Karusel ko'rinishidagi kontent slayderlari jQuery yordamida ko'rsatiladi.

Namoyish sahifasi ushbu karuselni veb-saytingizga qanday qo'shishni tasvirlaydi.

Plagin "Slider Kit", oson karusel

turli yo'llar bilan aylantirish

7. javascript karuseli

jQuery vertikal rotatori: sahifadagi kontentni avtomatik ravishda aylantiradi.

Navigatsiya tugmachasini o'tkazish, shuningdek aylanishni to'xtatish va uni qayta ishga tushirish imkoniyati.

Kursorni sichqoncha ustiga olib borganingizda, qo'l silkita boshlaydi.

HTML tartibi darajasida aylantiriladigan bloklar li ro'yxatidagi asosiy elementlar bilan ifodalanadi.

12. javascript CSS aylantirish maydoni

DIV konteyneriga joylashtirilgan, aylantiruvchi ijodiy maydon uchun "TinyScroller" javascript yechimi.

13. jQuery plagini "Smooth Div Scroll"

Qo'shiq maydonida gorizontal aylantirishni amalga oshirish uchun plagin.

Sichqoncha kursorini maydonning chap yoki o'ng chetiga olib borganingizda, aylantirish boshlanadi.

Kontentli slaydlar o'rtasida navigatsiya qo'shimcha strelkalar yordamida yoki eskizni bosish orqali amalga oshirilishi mumkin.

Pastki qismida slaydga eskiz yoki qo'shimcha tavsif qo'shish/ko'rsatish imkonini beruvchi "Ko'rsatish" tugmasi mavjud.

15. "Circular Content Carousel" kontentni aylantiruvchisi

17. Scroller

Kursor ustiga surilganda paydo bo'ladigan aylantiruvchi blok.

Buning o'rniga qo'shimcha aylantirish chizig'i yoki sichqonchaning qo'shimcha g'ildiragi yordamida aylantirishingiz mumkin. Shunga o'xshash jQuery yechimi Apple veb-saytida ushbu effektga javoban ishlab chiqilgan. Ushbu korporatsiyaning tergovchilari har doim butun dunyo bo'ylab veb-ustalar qabul qilgan ajoyib echimlarni bilishgan.

Plaginni ko'rsatish uchun ro'yxatdagi istalgan toifadan tanlang.

19. Yaxshi slayder

Slayder avtomatik ravishda yaratiladi. Mahsulot nomi, tavsifi, tartibi va tasvir manzili ko'rsatilgan ma'lumotlar slider.db.txt faylidan olinadi. Vikorizatsiya qilinadigan texnologiyalar: CSS, PHP, jQuery.

20. jQuery vikilari bilan aylanuvchi bloklar

Blokni aylantirish effektini ko'rish uchun demo sahifadagi kichik to'rtburchaklardan birini bosing

Masalan, kontentni aylantirish uchun plaginni ko'rsatish uchun vikorizatsiya qilish mumkin

qolgan yangiliklar yoki saytda Twitter yozini ko'rsatish uchun. 22. “Mijoz uchun qo‘llanmalar” dinamik bloki

Xabarlar bilan tasvirlar yashirin bo'ladi va sichqonchani sichqoncha ustiga olib borganingizda, aylantirish boshlanadi va navigatsiya paneli paydo bo'ladi.

Sichqonchani tasvirlar ustiga olib borganingizda, boshqaruv tugmalari orasida bir xil nomlar ko'rsatiladi.

Sahifada juda chiroyli ko'rinadi

33. Birga siljitish, Mootools plagini “Scrollbar”

O'tkazish qo'shimcha aylantirish chizig'i va qo'shimcha sichqoncha g'ildiragi orqasida sodir bo'ladi.

Shunday qilib, uni tugatish mavzusi tugadi.

Biroq, ko'pincha nima samarali kerakligini bilish qiyin.

Ularning barchasi juda murakkab skriptlardan foydalanadi, ko'p funksiyalarsiz.

Men bu plaginni allaqachon chaqiraman.
Shunday qilib, men jQuery-da oddiy karuselning muqobil versiyasini baham ko'raman.

Siz karuselni yoki yangiliklar karuselini yoki boshqa kontentni qanday ko'rsatishni vikorist qilishingiz mumkin =)

UPD: 07/06/2014

Bu shunday ko'rinadi:

DEMO Zavantazhiti

//O'ng tomondagi o'qni bosish qayta ishlanmoqda $(document).on("click", ".carousel-button-right",function())( var carusel = $(this).parents(".carousel" ); right_carusel(carusel ) ); false;

//Chap strelkani bosish qayta ishlanmoqda $(hujjat).on("click",".carousel-button-left",function())( var carusel = $(this).parents(".carousel"); left_carusel(carusel ) );qayt false )); 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-moddalar")); $(karusel-elementlar")); +block_width+"px");$(karusel).find(".karusel-moddalar .karusel-blok").eq(-1).remove $(karusel).find(".karusel-elementlar"); ).animate((chapda: "0px"), 200 funksiyasi right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); (".carousel-items "); ).animate((chapda: "-"+ block_width +"px"), 200, function())( $(karusel).find(".carousel-items .carousel-block") eq(0). clone().appendTo($(karusel).find(".karusel-moddalar")); $(karusel-elementlar"));find(".karusel-moddalar .karusel-blok").eq(0) .remove(); $(karusel).find(".carusel-items").css(("chap":"0px")); ) $(function() ( //Karuselni avtomatik aylantirishni 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(karusel 3000) ) // Kursni $(document).on("mouseenter", ".carousel", function()) ustiga olib boring. ( $(this).addClass("hover"))) //Kursor karuseldan olib tashlandi $(document).on("mouseleave", ".carousel", function())($(this).removeClass( "Hover")))) Ko'rinib turibdiki, soyani olib tashlash mumkin.

Va hamma narsani bajarish uchun siz CSS-dagi asosiy blok va ichki bloklarning hajmini "aylantirish" ga o'zgartirishingiz kerak.

/* Bu bizning karuselimiz boshlanadi. Blok.karusel-o'rash joylashuvi shodo, o'rash.karusel-element mutlaqo. ekran. */ @media (maksimal kenglik: 480px) (. strelka, &. Shunday qilib, biz strelkalar ustiga bosganingizda, brauzerning karuselning eng yuqori qismiga bosqichma-bosqich qayta koʻrsatilishini yoʻq qilamiz. Bu kuch har qanday foydalanuvchi uchun amal qiladi. identifikatori “target -element” bilan boshlanadigan elementlar. */ (displey:none; ) /* Eng muhimi, biz barcha karusel slaydlarimizni aniq qilib ishlab chiqdik, ya’ni karusel ishtirok etganda biz katta bo‘sh joyni olib tashlaymiz. maydonda mehribonlik uchun birinchi slaydning tiniqlik qiymatini 1 ga o'zgartiramiz. 1); ; ) /* ..aks holda #target-item-1 diqqat markazida va biz birinchi slaydni ko'rsatmoqchimiz, keyin keyingi belgini tanlang ~ va ko'rinishni yana 1 ga o'rnating :-) */ #target-item-. 1:target~.item-1( shaffoflik:1; ) /* Agar boshqa target-item-# fokusda boʻlsa, ularni selektor yordamida tanlang, ularni silliq koʻrsating va z-indeks yordamida joylashtiring: 3. Bu yerda maqsadli element identifikatori bilan qoʻshimcha oraliqlarni qoʻshishingiz mumkin. sizda uchtadan ko'proq bo'ladi.

Siz darhol 10 dona qo'shishingiz mumkin. */ biri samarali usullar Saytni qo'llab-quvvatlovchilarga hurmat - bu qulab tushayotgan animatsiyani yaratish. Animatsiya elementlari mijozlarga mahsulotingiz haqida yaxshiroq muloqot qilish va ko'rsatishga yordam beradi.

Vibratsiyali panellar, shuningdek, rasmni aylantirganda yoki bosilganda paydo bo'ladigan bir qator boshqa effektlar juda mashhur bo'ldi. Ular, shuningdek, tebranadigan slayderlar, karusellar va panellar kabi hidlanadi. Ushbu maqolada yaratilish haqida ma'lumot mavjud moslashuvchan slayder Bunday slayderni tashkil qilish uchun robot funksiyasi aralashtirish oralig'ini, tezlikni o'rnatishga, shuningdek, slayd uchun qo'shiqni tanlashga imkon beradi.

Quyida slayderning o'zi ishlashini tartibga soluvchi bir qator o'zgaruvchilar mavjud. vaqt roʻyxati

- slaydni aralashtirishning suyuqligi TimeView

- Men sizga bir soat ko'rsataman RadioBut

- tezkor navigatsiya uchun slayd ostidagi tugmalar. Reklama maqsadlarida qiymat rost, agar siz yolg'onni tanlasangiz, tugmalar paydo bo'ladi.

Endi boshlaymiz! Keling, faylni yaratamiz va ochamiz index.htm Berilgan kodda hech qanday maxsus narsa yo'q, slayder-o'rash anglatadi zalni lageri Va slayder ekranning o'rtasida joylashgan. Parametr

faol slayd u bilan birga tasvirning o'lchami va balandligini o'rnatadi. I

slayder

Faqat faol rasmni ko'rsatadi. Keling, faylni yaratamiz va ochamiz Endi biz faylni yaratishimiz va ochishimiz mumkin style.css Va u erda bizga kerak bo'lgan belgilarni yozamiz:

Faqat faol rasmni ko'rsatadi. @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 (kenglik: 100%; displey: jadval; joy: nisbiy; to'ldirish: yashirin; -webkit-user-select: yo'q; -moz-user-select: yo'q; -ms- user-select: none; -webkit-transition: 1s ) .slide( width: calc(100%/4); ko'rsatish: inline: chap ); 100%; .

:hidden;text-indent:-9999px;fon:url(radioBg.p ng) markazning pastki qismi takrorlanmaydi; ) .Radio-But .ctrl-tanlash: hover ( kursor: pointer; fon-pozitsiya: markaz markazi; ) .Radio-but .ctrl-select.active ( fon-pozitsiya: markaziy tepa; ) #prewbutton, #keyingi tugma ( displey :block;width:40px;height:100%;position:absolute;top:0;overflow:hidden;text-indent:-999px;background:url("arrowBg.png") z-index: outline:none; !important;і Yakosti uslubida yozib qo'ying

kengligi - rasmlaringizning maksimal bahosi.#slayder (kengligi: hisob (100% * 4); )

$(document).ready(function() ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = funktsiya(o'q)( 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("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active" ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function())( animSlide("keyingi"); return false; )) $("#prewbutton").click( function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + indeks + ""; }); $("

))); $(".slide").hover().css("kursor", "ko'rsatgich"); rotator ();

)))