HTML va CSSsiz vikorist karuselini qanday yaratish mumkin.

Golovna

Mehribonlik bilan.

Ushbu maqolada men jQuery-da ajoyib engil slayder/karuselni joylashtiraman.

Tasvirni aylantirganda karusel 3D effektiga ega.

Markaziy fotosurat kattaroq o'lchamga ega va markazdan uzoqroqda joylashgan tasvirlar kichikroq va aniqroq bo'lganligi sababli.

Karusel hech qanday tarzda uslublanmagan, shuning uchun siz maxsus CSS qo'shishingiz shart emas, siz o'zingizning uslublaringizni osongina qo'shishingiz mumkin.

Slayderni o'rnatish ham juda oddiy. Saytda jQuery karuselini o'rnatishі 1. Biz arxivlarni rivojlantirmoqdamiz Boshlash uchun siz arxivlarga kirishingiz va fayllarni ochishingiz kerak.

2. Kerakli fayllarni serverga yuklang

Endi kerakli papkalar

tasvirlar

js

saytingizning ildiziga yuklang.

Agar bunday papkalar allaqachon mavjud bo'lsa, ulardagi fayllarni ushbu papkalarga ko'chiring.

3. Skriptlarni kiriting

Biz jQuery kutubxonasini o'z ichiga olamiz

karuselning ishlashini ifodalovchi skript va shuningdek, skriptni sozlash Hamma narsa tabiiy ravishda tegga kiritilgan 4. Uslublarni kiriting

Bundan tashqari, hamma narsa uchun ishlatiladigan uslublarni ro'yxatdan o'tkazish, ularni o'zgartirish kerak, ammo karuselning asosiy namoyishi uchun ular kerak emas.

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; balandligi: 300px; Uslublarni yoki mavjudlarini kiriting css fayli, yoki to'g'ridan-to'g'ri

5. Karuselning html kodini kiriting

Xo'sh va Ostannyy krok: kiritilishi mumkin html kodi / Karusellar u erga xohlagan joyingizga boradilar. Oldingi |

• Keyingisi
• jQuery 3D karuseli yoqilgan va agar siz hamma narsani to'g'ri bajargan bo'lsangiz, sizdan so'raladi.

Nima uchun JS skriptlari va mumkin bo'lgan skript to'qnashuvlarining barcha bosqichlarini tekshirishingiz shart emas. Hammaga omad Robiti sof JSda karusel, Noldan va o'zingizmi?

Agar qaror qabul qilishga tayyor bo'lsangiz, endi velosiped olish vaqti keldi,

silliq

Zarur bo'lganda, qo'shimcha usullardan foydalangan holda elementlarning kuchini o'zgartiradi. Kesish kerak bo'lgan uchta kit:

• JavaScript
• kuch
• usullari

podíi Kampaniyani Koristuvachning o‘zi boshlaydi ustiga bosing

, tugmani bosganingizda.

Dasturni yaratganingizdan so'ng, kerakli elementga bosish tugmasini o'rnating va bosilganda ishga tushirilishi mumkin bo'lgan brauzer uchun ko'rsatmalarni (funktsiyalarni) yozing. Karusel uchun HTML tartibi / Biz rasmlar uchun konteyner yaratishimiz, rasmlarni o'zlari va ikkita tugmachani kiritishimiz mumkin -.

Biz rasmlar uchun konteyner yaratishimiz, rasmlarni o'zlari va ikkita tugmachani kiritishimiz mumkin -
Karusel uchun HTML tartibi

Oldinga

chegara: 20px avtomatik;
matnni tekislash: markaz;
#gallery.photos img(
}

kengligi: 100%;
ko'rsatish: yo'q;
}

#gallery .photos img:birinchi farzand(
displey: blok;
}

Tugmalar (

yuqori chegara: 20px; sof JSda karusel Mantiqiy robotlar karuseli Karusel uchun HTML tartibi Biz yozishga qanchalik ishtiyoqimiz bor edi kod, agar siz mantiqni tushunmasangiz, nima kutilmoqda. Tugmani bosganda , aniq rasm aniq, lekin bu joyda yangisi paydo bo'ladi. Ko'rinadigan joyda faqat bitta rasm bor, keyin boshqalar bormi? Va reshta, biz uni yashirdik, barcha rasmlarga qo'ydik.

ko'rsatish: yo'q Karusel uchun HTML tartibi so'rab, butun insonni tazelikdan mahrum qilib ko'rsatish: blok, psevdoklass orqali birinchi farzand / Teringizdagi tugmani bosganingizda qanday ishlash kerak, birinchi rasm paydo bo'ldi va do'st paydo bo'ldi va boshqasi o'rniga uchinchisi.

Quvvatni o'zgartirish kerak

ko'rsatish

, orasida Karusel uchun HTML tartibi / Biz rasmlar uchun konteyner yaratishimiz, rasmlarni o'zlari va ikkita tugmachani kiritishimiz mumkin - yo'q blok, tugmani bosganingizda. JS kodi / Elementlarni robot tanlash.

Bo'shatish tugmalari
selektor tomonidan, usulni turg'unlashtirish

querySelector va ularni almashtiring btn_prev Saytda jQuery karuselini o'rnatish.

va ularni almashtiring btn_keyingi

Let btn_prev = document.querySelector("#gallery .buttons .prev");

let btn_next = document.querySelector("#gallery .buttons .keyingi"); , aniq rasm aniq, lekin bu joyda yangisi paydo bo'ladi..

Usul yordamida barcha rasmlarni selektor orqali tanlaymiz

querySelectopAll ko'rsatish: blok.

va shuning uchun aytish o'z ichiga oladi, men aytmoqchiman

- Elementlar massivini, keyin esa barcha rasmlarni tanlaydi.

Tasvirlarga ruxsat bering = document.querySelectorAll("#gallery .photos img");

Massivda elementlar noldan boshlab raqamlangan shaklda saqlanadi. Shunday qilib, biz raqam uchun ular bilan bog'lanishimiz mumkin. i, Men oxirgi rasm paydo bo'lguncha biriga o'girilaman va keyin Primus kabi karusel g'ichirlaydi, men yana birinchi rasmga murojaat qilaman.

Bu loop deb ataladi. i Biz shifokor bo'lsa aqlga buyuramiz

, ko'rinadigan tasvirlar sonini oshiradi, keyin siz 0 raqamlangan oqim tasviriga aylantirilasiz.
If(i >= images.length)(
}

i = 0; i// o'zgartiraman 0 qo'shaman

Rasmlar teskari tartibda yutib yuborilganda, shifokor
, biriga o'zgarishi mumkin.
Agar o'zgartirish ustunining qiymati noldan kichik bo'lsa, unda qolgan rasmning raqamini qo'yish kerak.
Btn_prev.onclick = function())(< 0){
images[i].style.display = "yo'q";
}
i = i – 1;
}

agar (ya'ni Massivda elementlar noldan boshlab raqamlangan shaklda saqlanadi. i = tasvirlar.uzunlik – 1;

images[i].style.display = "bloklash";

Biz uni kamindan chiqaramiz

, birini bosing va 2 raqami ostidagi rasmni tanlang. Bu qolgan rasm bo'ladi, chunki dasturda hisoblash noldan boshlanadi. Dizayner lavozimiga sinovdan o'tish uchun JS tushunchasidan foydalanish kerak, uning o'zi maket dizaynerlariga yo'naltirilgan. 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 sahifasida ushbu karuselni veb-saytingizga qanday qo'shish kerakligi tasvirlangan.

Plagin "Slider Kit", oson karusel

turli yo'llar bilan

aylantirish 7. javascript karuseli

8. jQuery plagini “Grid Navigation Effects”

jQuery vertikal rotatori: sahifadagi kontentni avtomatik ravishda aylantiradi.

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

Kursor sichqoncha ustiga olib kelinsa, qo'l qiyshiq bo'lib qoladi.

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 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 aylantirish, 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 yordamida oddiy karuselning muqobil versiyasini baham ko'raman.

Siz karuselni, 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(".karusel-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 aniqlik qiymatini 1 ga o'zgartiring, biz z-indeks qiymatini 2 ga o'rnatdik, bu boshqa slaydlardan pozitsion jihatdan ustundir */ .item-1( z-index:2; shaffoflik. :1; ) /* Shaffoflik qiymatiga ega bo'lish uchun bizga birinchi slayd kerak emas: 1. Aks holda, boshqalarni aylantirganda, biz bu slayddan o'tishimiz kerak */ *:target~.item-1(opacity:0) ; ) /* ..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-element-# 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.