HTML va CSSsiz vikorist karuselini qanday yaratish mumkin.

Golovna 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 maqola silliq avtomatik aylantirish effektiga ega karusel tipidagi moslashuvchan slayderga ega.

Bugungi kunga kelib, tayyor echimlar bilan taqdim etilgan yuzlab sharhlar mavjud, ularning aksariyati xalaqit bermaydigan ma'nosiz funktsiyaga ega, bu slayderning foydaliligini sezilarli darajada kamaytiradi, shuningdek, umuman saytga qiziqishingizni oshiradi. Professional veb-ishlab chiquvchilar har doim sozlangan fokuslar yaratishga qaror qilishgan

dasturiy mahsulotlar, qo'shimcha kutubxonalar va plaginlar uchun past kirish chegarasi bilan.

Bundan tashqari, bizning skriptimiz robotlarida muammolar mavjud minimal foyda

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

@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 ); - slaydni aralashtirishning suyuqligi 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;

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 ); Yakosti uslubidaі yozib qo'ying kengligi

- rasmlaringizning maksimal bahosi. #slayder (kengligi: hisob (100% * 4); )і .slide (kengligi: hisob (100%/4); ) slayderingizdagi rasmlar sonini ko'rsating.

Ilovada 4 ta mavjud. Oldinga/orqaga o'qlar slayderingizning ko'rinishiga ta'sir qilgani uchun ular ko'rinmas holga keltirilishi va kursorni ustiga olib borilganda paydo bo'lishi mumkin. Qaysi parametrlar uchun

$(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 ();

)))

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 yoki yangiliklar karuselini yoki boshqa kontentni qanday ko'rsatishni vikorist qilishingiz mumkin =)
Men o'zimga ruxsat bergan yagona kichik burilish karusel blokining soyasi edi.

UPD: 07/06/2014

DEMO Zavantazhiti

Men keyingi bosqichning tuzilishini ko'rishim mumkin:

TJ oddiy moslashuvchan karusel

//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.

Sharob avtomatik ravishda aylantirilishi uchun bu jarayonni aylantirish ham juda oson (da bu yigitga, auto_right funksiyasiga izoh berish kifoya). Shunday qilib, ushbu oddiy galereyadan siz berilgan topshiriq doirasida kerakli narsalarni topishingiz mumkin! / Shuni ham ta'kidlash joizki, hover ilovasi moslashuvchan bo'lib, karuselning o'lchami ekran o'lchamiga moslashadi va kompyuter yoki noutbuk ekranida ham, planshetlar va planshetlar ekranlarida ham to'g'ri ko'rsatiladi. smartfonlar. Robiti

• dastlabki maqsadlar uchun
• Vikonannya testovykh zavdan uchun

Ariza topshirishda, iltimos, vakansiyaga murojaat qiling HTML maket dizayneri, men sizdan shunchaki karuselni tashlashingizni emas, balki uni harakatga keltirishingizni so'rayman JS uchinchi tomon kutubxonalarisiz.

Butt karuseli

JavaScript elementlaridan qanday foydalanish kerak?

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.

Dasturga ega bo'lganingizdan so'ng, bosish tugmasini kerakli elementga 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

Oldinda

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; JS 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, lekin keyin boshqalar bormi? Va reshta, biz uni sochdik, 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, turg'unlik usuli bilan

querySelector va ularni almashtiring btn_prev btn_keyingi.

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

let btn_next = document.querySelector("#gallery .buttons .keyingi");

Usul yordamida barcha rasmlarni selektor orqali tanlaymiz , aniq rasm aniq, lekin bu joyda yangisi paydo bo'ladi..

querySelectopAll

va shuning uchun aytish o'z ichiga oladi, men aytmoqchiman ko'rsatish: blok.

tasvirlar

Shu bilan birga, ekranda bunday rasm yo'q.

U erda rasm qanday ko'rinadi?

Biz bilamizki, keyingi rasmning soni bundan buyon avvalgisidan bittaga ko'p bo'ladi. I++; // i ni bittaga o'zgartiring tasvirlar.uzunlik

- O'zgartirish mumkin bo'lgan juda ko'p rasmlar bor, bizda 3 ta rasm borligini ta'kidlashning hojati yo'q, brauzer buni ham biladi. // i ni bittaga o'zgartiring Biz buyuk tabibmiz

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 ni bittaga o'zgartiring Agar shifokor bo'lsa, aqlga buyuramiz

, ko'rinadigan tasvirlar sonini oshiradi, keyin siz 0 raqamlangan oqim tasviriga aylantirilasiz.
If(i >= images.length)(
i = 0;
// o'zgartiraman 0 qo'shaman< 0){
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. Biz bilamizki, keyingi rasmning soni bundan buyon avvalgisidan bittaga ko'p bo'ladi. Btn_prev.onclick = function())(

images[i].style.display = "yo'q";

/* 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. */

Internetda jQuery karusellari va slayderlarini yaratish uchun barcha turdagi ajoyib plaginlarni topishingiz mumkin.

Ular qo'shimcha effektlar bilan dinamik aylantirishni amalga oshirishga imkon beradi. Bu so'nggi yillarda veb-dizayndagi eng mashhur tendentsiyalardan biridir. Tayyor kutubxonalar va jQuery plaginlarining bunday kombinatsiyasi vaqtni tejash imkonini beradi.

Sizga kerak bo'lgan yagona narsa JavaScript va CSS fayllarini yozish va keyin effektni kerakli HTML elementlarigacha distillashdir.

Bundan tashqari, maxsus CSS uslublarini o'rnatishingiz mumkin. Bugungi maqolamiz siz bilan tanishishga qaratilgan sezgir jQuery plaginlari karusel va slayderlarni yaratish uchun. Chalg'ituvchi - kontent bilan to'liq ekranli sensorli slayder yaratish uchun jQuery plagini

Moslashuvchan to'liq ekranli slayder karusel jQuery kontenti qo'llab-quvvatlanadi

sensorli ekranlar

.

Qo'shimcha adaptiv bilan tasvirlarni namoyish qilish uchun yana bir plagin jQuery karusellari sozlanishi kerak bo'lgan boshqaruv elementlari va trim darajalari bilan:

Carousel 3D: arzimas oʻrash effektlari bilan jQuery karusel plagini

Sleek Slider: sezgir jQuery to'liq ekranli karuseli

Kontent va tasvirlarni ko'rsatish uchun jQuery karuselini miniatyura qiling va qo'shing har xil turlari navigatsiya ( Tasvir eskizlari, sahifalash elementlari yoki yorliqlari bo'lgan SVG strelkalari):

PaW Carousel: jQuery-ga asoslangan moslashuvchan karusel

PaW Carousel (v2) - bu kichik rasmlarga ega sezgir, oddiy jQuery karusellarini yaratish uchun miniatyura plaginidir:

Carousel Sharer: jQuery karuselini ijtimoiy tarmoqlarda qayta joylashtirish uchun

Carousel Sharer – jQuery plagini bo‘lib, bir qator mahsulotlarni ketma-ket ko‘rsatish imkonini beradi va tomoshabinlarga Facebook, Twitter, Google+ va Pinterest’da mahsulotingizni baham ko‘rish imkonini beradi:

Simply Carousel: minimalist sezgir tasvir karuseli

Simply Carousel - bu miniatyura va engil jQuery plaginidir, u sizga qutilar yaratish imkonini beradi moslashuvchan slayderlar va karusel tasviri:

Slaydlar: sezgir jQuery karuseli va sensorli qurilmalarni qo'llab-quvvatlaydigan slayd-shou

Slaydlar - jQuery veb-saytlari uchun eskizlari, strelka navigatsiyasi va matn elementlarini vikorizatsiya qilish qobiliyatiga ega moslashuvchan karusellarni yaratish uchun miniatyura jQuery plaginidir.

Sensorli ekranlarni qo'llab-quvvatlash amalga oshirildi:

jQuery yordamida kontent karuseli

Avtomatik yaratish funktsiyalari, yadro elementlari va qayta qo'ng'iroq qilish funktsiyalariga ega oddiy moslashuvchan jQuery karuseli:

Slick: bu jQuery karuseli javob beradi Slick - bu sozlash, moslashtirish va optimallashtirish uchun "yangi" plagin mobil qurilmalar

Har qanday HTML elementlari bilan tuzilgan jQuery karusellari va slayderlari:

bxSlider: jQuery yordamida HTML tarkibi uchun slayder

bxSlider - bugungi kunda mavjud bo'lgan eng yaxshi jQuery kontent slayderlaridan biri.

Ushbu plagin slayd-shoularni tashkil qilish uchun juda mos keladi:

CarouFredSel: qattiq va qattiq jQuery karusel plagini

jQuery.carouFredSel har qanday HTML elementini karusel tarkibiga aylantiruvchi plagindir. Bir vaqtning o'zida bir yoki bir nechta elementlarni gorizontal va vertikal ravishda aylantirishingiz mumkin. Shuningdek, siz avtomatik yaratishni yoqishingiz va doimiy ravishda aylantirishni boshlashingiz mumkin:

Bulutli karusel: Javascriptdagi 3D karusel

Ushbu karusel sizga real nuqtai nazarni yaratishga imkon beradi.

Ko'p jihatdan jQuery 3D karusellari tasvirni o'zgartirishdan ko'ra, uning o'lchamiga asoslangan istiqbolli effekt yaratadi, bu esa sahifadagi elementlarning nomutanosibligiga olib keladi:

Elastislide: jQuery bilan sezgir karusel

Elastislide - bu har qanday ekran o'lchamiga mos keladigan sezgir jQuery karuselidir.

"Gum" va karuselning o'zini yaratish uchun karuselni tor kenglikdagi idishga soling:

jCarousel Lite

Ushbu plagin yordamida siz slayder ko'rinishida rasmlar yoki HTML elementlarini ko'rishingiz mumkin.

Sizga faqat 2Kb kerak, lekin siz quyidagi sozlamalardan foydalanishingiz mumkin:

3D karusel

Kursor holatiga javob beradigan soya effektlari va animatsiyaga ega tasvir yordamida 3D jQuery karuselini yarating:

JQuery karusel plagini Ushbu plagin sizga karuselda qancha elementlar ko'rsatilishini aniqlash imkonini beradi, shundan so'ng plagin ularni kerakli kenglikka moslashtiradi: Slayder, nima o'raladi, jQuery'dagi rasm

Asimmetrik tasvir slayderi

kichik qo'shimchalar : Soat aylanar ekan, badbo'y hidning tasviri aylanadi. Elementlarning kichik siljishi tufayli slayder g'ayrioddiy shaklga ega bo'ladi: jQuery xususiyati karuseli Ushbu plagin tavsiya etilgan maqolalarni ko'rsatish uchun ishlatiladi

bosh sahifa

, lekin siz boshqa har qanday tarkibni ham vikorize qilishingiz mumkin.

Bu boshqalar kabi bir vaqtning o'zida uchtagacha tasvirni ko'rsatish imkonini beradi

jQuery elementlari kontent karuseli: jQuery Infinite Carousel

Bu jQuery plagini bo'lib, karuselda cheksiz miqdordagi rasm va videolarni ko'rsatish imkonini beradi.