Adaptivni vrtuljak s nekoliko redova. Kako napraviti karusel koristeći samo HTML i CSS. Responzivni jQuery klizač sadržaja bxSlider

Napraviti vrtuljak pomoću čistog JS-a, od nule, i to sami? Zašto izmišljati kotač kada postoji gotova rješenja, slick/sova klizači? Za to postoje najmanje dva razloga:

u obrazovne svrhe
za dovršavanje testnih zadataka

Prilikom prijave za posao, čak i za slobodno mjesto dizajnera HTML izgleda, od vas će se tražiti ne samo da napravite vrtuljak, već i da ga implementirate u JS, bez korištenja biblioteka trećih strana.

Primjer vrtuljka Što JavaScript radi s elementima?

Mijenja svojstva elemenata pomoću metoda kada se dogode događaji. Tri stupa na kojima počiva JavaScript:

Svojstva
metode
događanja

Korisnik pokreće onclick događaj kada se klikne na gumb. Zadatak programera je priložiti klik događaj željenom elementu i napisati upute (funkciju) pregledniku što se treba dogoditi kada se klikne.

HTML oznaka za karusel

Napravimo spremnik za slike, umetnimo same slike i dva gumba - Naprijed / leđa.

leđa
Naprijed

CSS stilovi #galerija(
širina: 640px;
margina: 20px auto;
poravnanje teksta: središte;
}

#gallery.photos img(
širina: 100%;
prikaz: nijedan;
}

#galerija .fotografije img:prvo-dijete(
prikaz: blok;
}

Gumbi (
margin-top: 20px;
}

Logika vrtuljka

Kako uopće napisati JS kod kada ne razumijete logiku onoga što se događa? Kada pritisnete tipku Naprijed, trenutna slika nestaje i na njenom mjestu se pojavljuje nova. Uvijek postoji jedna slika u području vidljivosti, ali gdje su onda ostale? I sakrili smo ostatak, postavili display: none za sve slike, ostavljajući samo prvu, postavljajući je display: block, kroz pseudoklasu prvog djeteta.

Kako to učiniti tako da svaki put kada kliknete na gumb Naprijed, prva slika je nestala, a pojavila se druga i umjesto druge treća. Potrebno je prebaciti svojstvo prikaza između nijedan / blokirati kada kliknete na gumb.

JS kod Izrada selekcije elemenata

Uzmimo gumbe Naprijed / leđa selektorom, koristeći metodu querySelector i stavljajući ih u varijable btn_prev / btn_next.

Neka btn_prev = document.querySelector("#gallery .buttons .prev");
let btn_next = document.querySelector("#gallery .buttons .next");

Uzmimo sve slike selektorom koristeći metodu querySelectopAll i također ih smjestimo u varijablu images.

querySelectopAll – dobiva niz elemenata, odnosno sve slike.

Neka slike = document.querySelectorAll("#gallery .photos img");

U nizu su elementi pohranjeni, već numerirani, počevši od nule. Stoga ih možemo kontaktirati putem broja. Ali prvo, kreirajmo novu varijablu i u nju smjestimo broj prve slike, one koja ima svojstvo display: block.

Neka je i = 0; // broj trenutne slike na ekranu

Okrećemo se trenutnoj slici i mijenjamo njezino svojstvo prikaza u stilovima.

Slike[i].style.display = "ništa"; // sakrij trenutnu sliku

Sada na ekranu nema niti jedne slike. Kako će se tamo pojaviti sljedeća slika? Znamo da će broj sljedeće slike uvijek biti za jedan veći od broja prethodne.

I++ ; // povećanje varijable i za jedan

images.length je broj slika koje se mogu mijenjati, tako da nema potrebe označavati da imamo 3 slike, preglednik to već zna. Povećavamo brojač i, svaki put za jedan, dok se ne prikaže posljednja slika, a zatim prisiljavamo vrtuljak da se ponovno vrati na prvu sliku. To se zove petlja.

Zapisujemo uvjet da kada brojač i postane veći od broja dostupnih slika, vratit će se na trenutnu sliku, broj 0.

If(i >= images.length)(
i = 0; // varijabla i je 0
}

Prilikom listanja slika obrnutim redoslijedom, brojač i trebao bi se smanjiti za jedan. Ako vrijednost varijable postane manja od nule, tada u nju trebate staviti broj zadnje slike.

Btn_prev.onclick = function())(
slike[i].style.display = "ništa";
i = i - 1;
ako ja< 0){
i = slike.duljina - 1;
}
slike[i].style.display = "blok";
}

Od ukupnog broja slika duljinu oduzimamo jedan i dobivamo sliku broj 2. Ovo će biti posljednja slika, budući da računica u programiranju počinje od nule.

Da biste položili test za poziciju dizajnera izgleda, potrebno vam je pouzdano razumijevanje JS-a, koji je posebno namijenjen dizajnerima izgleda.

Da, tema je dosta otrcana. No ipak, često je teško pronaći ono što stvarno trebate. Svi nude visoko sofisticirane skripte, s puno nepotrebnih funkcija. I obično su to već komprimirani dodaci.

Stoga ću ponuditi svoju alternativnu verziju vrlo jednostavnog vrtuljka koji koristi jQuery.

Može se koristiti kao vrtuljak slika, kao i vrtuljak vijesti ili bilo kojeg drugog sadržaja =)

Jedini mali zaokret koji sam si dopustio bila je sjena u blizini bloka vrtuljka.

UPD: 06.07.2014

Izgledat će otprilike ovako:
DEMO preuzimanje

Struktura će imati sljedeći oblik:

TJ jednostavan adaptivni karusel

Opišimo stilove:

Vrtuljak ( max-width: 1080px; /* širina cijelog bloka */ margina: 50px auto; width:100%; ) .carousel-wrapper ( margina: 10px 30px; /* ispuna za strelice */ overflow: skriveno; / * sakrij sadržaj koji se proteže izvan glavnog područja */ position:relative; ) .carousel-items ( width: 10000px; /* postavi veću širinu za skup elemenata */ position: relative; /* postavi blok u odnosu na glavno područje karusela */ ) .carousel -block ( float: lijevo; /* poravnajte sve elemente vrtuljka */ širina: 250px; /* postavite širinu svakog elementa */ padding: 10px 10px 10px 0px; /* napravite margine da se elementi ne spajaju */ ) .carousel -block img( display:block; ) /*********** BUTTONS ***********/ .carousel- button-left a, .carousel-button-right a( width: 25px; height: 36px; position: relative; top: 80px; cursor: pointer; text-decoration:none; ) .carousel-button-left a( float: lijevo; pozadina: url(../images/carousel- left.png); .carousel-button-desno a( float: desno; pozadina: url(../images/carousel-right.png); ) /******** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); )

I na kraju, kako bi to trebalo funkcionirati:

//Rukovanje klikom na desnu strelicu $(dokument).on("click", ".carousel-button-right",function())( var carusel = $(this).parents(".carousel"); desni_karusel(karusel); vrati false; )); //Rukovanje klikom na lijevu strelicu $(dokument).on("klik",".carousel-button-left",function())( var carusel = $(this).parents(".carousel"); lijevo_karusel(karusel); vrati false; )); funkcija left_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carousel-items")); $(carusel).find(".carusel-items").css(("lijevo":"-" +block_width+"px")); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items" ).animate((lijevo: "0px"), 200); ) funkcija right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find (".carousel-items").animate((lijevo: "-"+ block_width +"px"), 200, function())( $(carusel).find(".carousel-items .carousel-block") . eq(0).clone().appendTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0 ) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); )); ) $(function() ( //Ukloni komentar iz retka ispod za omogućavanje automatskog pomicanja vrtuljka auto_right(".carousel:first"); )) // Funkcija automatskog pomicanja auto_right(carusel)( setInterval(function())( if (!$(carusel).is(".hover" )) desni_karusel( vrtuljak); ), 3000) ) // Pomaknite kursor preko vrtuljka $(document).on("mouseenter", ".carousel", function())($(this).addClass("hover")))) // Ukloni kursor s vrtuljka $(dokument).on("mouseleave", ".carousel", function())($(this).removeClass("hover")))

Sukladno tome, sjena se može ukloniti. A da biste ga koristili, samo trebate promijeniti veličinu glavnog bloka i ugniježđenih blokova za pomicanje u CSS-u. Također je vrlo jednostavno pokrenuti ovaj proces u petlji tako da se automatski pomiče (u ovom slučaju samo skinite komentar s poziva funkcije auto_right). Odnosno, iz ove jednostavne galerije možete napraviti sve što vam treba u okviru zadatka!

Također treba napomenuti da je navedeni primjer adaptivan, odnosno da se veličina vrtuljka prilagođava u skladu s veličinom ekrana i bit će ispravno prikazana kako na ekranu računala ili laptopa, tako i na ekranima tableta i pametnih telefona.

Trenutno je klizač - vrtuljak - funkcija koju je jednostavno potrebno imati na poslovnoj web stranici, portfolio web stranici ili bilo kojem drugom resursu. Zajedno s klizačima slika preko cijelog zaslona, vodoravni klizači vrtuljaka dobro se uklapaju u bilo koji web dizajn.

Ponekad bi klizač trebao zauzeti jednu trećinu stranice stranice. Ovdje se koristi klizač vrtuljka s efektima prijelaza i responzivnim izgledima. Web-mjesta za e-trgovinu koriste klizač vrtuljka za prikaz više fotografija u pojedinačnim postovima ili stranicama. Kod klizača se može slobodno koristiti i mijenjati prema vašim potrebama.

Koristeći JQuery u kombinaciji s HTML5 i CSS3, možete učiniti svoje stranice zanimljivijima, pružiti im jedinstvene efekte i privući pozornost posjetitelja na određeno područje web stranice.

Slick – moderan dodatak klizača vrtuljka

Slick je besplatno dostupan jquery dodatak čiji programeri tvrde da će njihovo rješenje zadovoljiti sve vaše zahtjeve slajdera. Adaptivni klizač - vrtuljak može raditi u načinu rada "pločice" za mobilne uređaje i u načinu rada "povuci i ispusti" za verziju za stolna računala.

Sadrži efekt prijelaza "blijeđenja", zanimljivu značajku "centralnog načina rada", lijeno učitavanje slika s automatskim pomicanjem. Ažurirana funkcionalnost uključuje dodavanje slajdova i filtar slajdova. Sve kako bismo osigurali da konfigurirate dodatak prema svojim zahtjevima.

Demo način | preuzimanje datoteka

Owl Carousel 2.0 – jQuery – dodatak za korištenje na uređajima osjetljivim na dodir

Ovaj dodatak ima velik skup funkcija, pogodan i za početnike i za iskusne programere. Ovo je ažurirana verzija klizača vrtuljka. Isto se zvao i njegov prethodnik.

Klizač ima neke ugrađene dodatke za poboljšanje ukupne funkcionalnosti. Animacija, reprodukcija videa, automatska reprodukcija klizača, lijeno učitavanje, automatsko podešavanje visine - to su glavne značajke Owl Carousel 2.0.

Uključena je podrška za povlačenje i ispuštanje za praktičniju upotrebu dodatka Mobilni uredaji.
Dodatak je savršen za prikaz velikih slika čak i na malim ekranima mobilnih uređaja.

Primjeri | preuzimanje datoteka

jQuery dodatak Srebrna staza

Prilično mali, ali funkcionalno bogat jquery dodatak koji vam omogućuje postavljanje klizača na stranicu - vrtuljak, koji ima malu jezgru i ne troši puno resursa stranice. Dodatak se može koristiti za prikaz okomitih i vodoravnih klizača, s animacijom i stvaranje skupova slika iz galerije.

Primjeri | preuzimanje datoteka

AnoSlide – Ultra kompaktni prilagodljivi jQuery klizač

Ultra kompaktni jQuery klizač - vrtuljak, čija je funkcionalnost puno veća od one običnog klizača. To uključuje pretpregled jednu sliku, prikazujući više slika u obliku vrtuljka i klizača na temelju naslova.

Primjeri | preuzimanje datoteka

Owl Carousel – Jquery slider – carousel

Sova vrtuljak – klizač s osloncem ekrani osjetljivi na dodir i tehnologije povlačenja i ispuštanja, koje se lako integriraju u HTML kôd. Dodatak je jedan od najboljih klizača koji vam omogućuju stvaranje prekrasnih karusela bez posebno pripremljenih oznaka.

Primjeri | preuzimanje datoteka

3D galerija - vrtuljak

Koristi 3D prijelaze na temelju CSS stilova i malo Javascript koda.

Primjeri | preuzimanje datoteka

3D vrtuljak pomoću TweenMax.js i jQuery

Veličanstveni 3D vrtuljak. Čini se da je ovo još uvijek beta verzija, jer sam otkrio nekoliko problema s njom upravo sada. Ako ste zainteresirani za testiranje i izradu vlastitih slajdera, ovaj će vam vrtuljak biti od velike pomoći.

Primjeri | preuzimanje datoteka

Vrtuljak pomoću bootstrapa

Responzivni klizač - vrtuljak koji koristi tehnologiju pokretanja samo za vašu novu web stranicu.

Primjeri | preuzimanje datoteka

Rotirajući klizač pokretne kutije temeljen na Bootstrap okviru

Najpopularniji na portfelju i poslovnim web stranicama. Ova vrsta klizača - vrtuljak - često se nalazi na stranicama bilo koje vrste.

Primjeri | preuzimanje datoteka

Sićušni klizač krugova

Ovaj maleni klizač spreman je za rad na uređajima s bilo kojom rezolucijom zaslona. Klizač može raditi u kružnom i vrtuljkom načinu rada. Mali krug predstavljen je kao alternativa drugim klizačima ove vrste. Dostupna je ugrađena podrška operativni sustavi IOS i Android.

U kružnom načinu, klizač izgleda prilično zanimljivo. Izvrsna podrška za metodu povlačenja i ispuštanja i sustav za automatsko pomicanje slajdova.

Primjeri | preuzimanje datoteka

Klizač sadržaja Thumbelina

Moćni, prilagodljivi klizač s vrtuljkom savršen je za modernu web stranicu. Radi ispravno na bilo kojem uređaju. Ima vodoravni i okomiti način rada. Njegova je veličina smanjena na samo 1 KB. Ultra kompaktni dodatak također ima izvrsne glatke prijelaze.

Primjeri | preuzimanje datoteka

Vau – klizač – vrtuljak

Sadrži više od 50 efekata koji vam mogu pomoći da stvorite originalni klizač za svoju web stranicu.

Primjeri | preuzimanje datoteka

Responzivni jQuery klizač sadržaja bxSlider

Promijenite veličinu prozora preglednika da vidite kako se klizač prilagođava. Bxslider dolazi s više od 50 opcija prilagodbe i prikazuje svoje značajke s različitim efektima prijelaza.

Primjeri | preuzimanje datoteka

jVrtuljak

jCarousel je jQuery dodatak koji će vam pomoći organizirati gledanje vaših slika. Možete jednostavno izraditi prilagođene karusele slika iz baze prikazane u primjeru. Klizač je prilagodljiv i optimiziran za rad na mobilnim platformama.

Primjeri | preuzimanje datoteka

Scrollbox - jQuery dodatak

Scrollbox je kompaktni dodatak za izradu klizača - karusela ili indeksiranja teksta. Ključne značajke uključuju efekte okomitog i vodoravnog pomicanja s pauzom pri prelasku miša.

Primjeri | preuzimanje datoteka

dbpasCarousel

Jednostavan klizač s vrtuljkom. Ako trebate brzi dodatak, ovaj je 100% prikladan. Dolazi samo s osnovnim značajkama potrebnim za rad klizača.

Primjeri | preuzimanje datoteka

Flexisel: Responzivni JQuery klizni dodatak - vrtuljak

Kreatori Flexisela bili su inspirirani starim školskim dodatkom jCarousel, izradivši njegovu kopiju s ciljem ispravnog rada slajdera na mobilnim i tablet uređajima.

Flexiselov responzivni izgled, kada se izvodi na mobilnim uređajima, razlikuje se od rasporeda veličine prozora preglednika. Flexisel je savršeno prilagođen za rad na ekranima, kako niske tako i visoke rezolucije.

Primjeri | preuzimanje datoteka

Elastislide – adaptivni klizač- vrtuljak

Elastislide se savršeno prilagođava veličini zaslona vašeg uređaja. Možeš pitati minimalni iznos prikazane slike u određenoj rezoluciji. Dobro funkcionira kao klizač na vrtuljku s galerijama slika, koristeći fiksni omotač uz efekt okomitog pomicanja.

Primjer | preuzimanje datoteka

FlexSlider 2

Besplatni klizač iz Woothemesa. S pravom se smatra jednim od najboljih prilagodljivih klizača. Dodatak sadrži nekoliko predložaka i bit će koristan i početnicima i stručnjacima.

Primjer | preuzimanje datoteka

Nevjerojatan vrtuljak

Amazing Carousel – responzivni klizač slike koji koristi jQuery. Podržava mnoge sustave za upravljanje sadržajem kao što su WordPress, Drupal i Joomla. Također podržava Android i IOS i desktop operativne sustave bez problema s kompatibilnošću. Ugrađeni nevjerojatni predlošci vrtuljka omogućuju vam korištenje klizača u okomitom, vodoravnom i kružnom načinu rada.

Primjeri | preuzimanje datoteka

/* Ovdje počinje naš vrtuljak. Block.carousel-wrapper je pozicioniran relativno, wrapper.carousel-item je pozicioniran apsolutno. . */ .carousel-wrapper( position:relative; /* Apsolutno pozicionirani okviri dobivaju svoju visinu i širinu od svog roditelja. Učinili smo ih transparentnima prema zadanim postavkama, a onda će se glatko pojavljivati kada kliknete na linkove.arrow-prev i.arrow- next. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; neprozirnost:0; prijelaz:all0.5sease-in-out; /* Primjećeno ispuna s lijeve strane i 50px s desne strane? Na taj način možemo postaviti svoje veze! Svaka će biti široka 50 piksela. Također, koristim prazne veze s pozadinska slika tako da veze izgledaju kao strelice. Provjerite jeste li promijenili URL poveznica s izvornim URL-om tako da vaše veze nisu samo prozirni pravokutnici. */ .arrow( position:apsolute; top:0; display:block; width:50px; height:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Vratimo našu strelicu ulijevo. */ &.arrow-prev( left:0; ) /* I drugu na desno. Budući da koristim istu sliku za strelicu, rotiram je za 180 stupnjeva. */ &.arrow-next(right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Jako mi se sviđa kako izgledaju tobogani na vrtuljku tamna pozadina, a ako block.carousel-item ima klasu "light", promijenit ćemo njegov tekst u bijeli i koristiti bijele strelice umjesto sivih. Još jednom provjerite je li put do slike strelice točan */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Napišimo medijski upit za promjenu veličine strelica na uređajima s manjim veličinama zaslona.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background -position:10px50% ; ) ) ) /* Postavite ciljeve veze za prikaz: nijedan; Na taj se način rješavamo neprestanog skakanja preglednika na sam vrh vrtuljka svaki put kada kliknemo na strelice. Ovo svojstvo je učinkovito za sve elemente čiji ID počinje s "target-item". */ ( display:none; ) /* Gore smo sve naše slajdove vrtuljka učinili prozirnima, što znači da ćemo, kada se vrtuljak učita, umjesto toga dobiti veliki prazan okvir. Promijenimo vrijednost prozirnosti za prvi slajd na 1 za prikaz. Također smo postavili z-index na 2, postavljajući ga više od ostalih slajdova. */ .item-1( z-index:2; opacity:1; ) /* Ali ne želimo da prvi slajd uvijek ima vrijednost neprozirnosti neprozirnosti: 1; inače ćemo se morati probijati kroz ovaj slajd dok okrećemo ostale. */ *:target~.item-1( opacity:0; ) /* ..ali ako je #target-item-1 u fokusu i želimo prikazati prvi slajd, tada ga odaberite pomoću ikone ~ i postavite prozirnost ponovno na 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Ako su drugi target-item-# u fokusu, odaberite ih pomoću ~ selektora, glatko pokažite i postavite ih na vrh koristeći z-index: 3. Ovdje možete dodati dodatne raspone s identifikatorom ciljne stavke ako ih imate više od tri. Možete dodati 10 komada odjednom.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )

Owl Carousel je jQuery dodatak s podrškom za dodir koji vam omogućuje stvaranje responzivnog (adaptivnog) klizača (vrtuljka).
Vrlo je zgodan, jednostavan i adaptivni dodatak za izradu klizača, karusela itd.
U ovom članku pokušat ću vam objasniti i pokazati kako to radi.

Instaliranje dodatka Owl Carousel
Prvo moramo preuzeti arhivu s dodatkom

U nastavku ću pokazati primjer instaliranja dodatka u DataLife Engine predlošku.

Nakon što preuzmemo arhivu, otvorimo je i distribuiramo datoteke na sljedeći način:
Datoteke owl.carousel.css i owl.transitions.css smještene su u mapu stil tako ili css.
Datoteka owl.carousel.js smještena je u mapu js

Sada moramo povezati ove datoteke tako da rade u našem predlošku.
Otvorite datoteku main.tpl i prije retka unesite sljedeće retke:
Promijenite mapu css u onu u kojoj imate css stilove!
Zatim na samom dnu prije retka upisujemo sljedeći redak:
OK, sada je sve gotovo! Završili smo s instalacijom.

Sada moramo umetnuti i konfigurirati sam klizač.
Pokazat ću vam na primjeru vrhunske vijesti oni Prikazat ću popularne vijesti kroz naš vrtuljak sova.

Stranica s dokumentacijom opisuje sve opcije, demonstracije i načine korištenja našeg dodatka Owl Carousel.
Slijedite vezu i odaberite bilo koji klizač koji vam se sviđa.
Za naše vrhunske vijesti Odabrao sam prvu s imenom Slike. Na kartici javascript kopirajte ove retke:
$(document).ready(function() ( $("#owl-demo").owlCarousel(( autoPlay: 3000, items: 4, itemsDesktop: , itemsDesktopSmall: )); )); i umetnite ih u datoteku main.tpl prije reda

Zatim u kartici CSS kopiramo retke:
#owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; width: 100%; height: auto; ) i povežite ih s bilo kojim css datoteci ili u glavnoj.tpl datoteci prije retka ali nakon retka !
Sada ćemo analizirati naš HTML kod i povezati ga s vrhunske vijesti. U main.tpl datoteci umetnite oznaku (topnews) na traženo mjesto, što zauzvrat prikazuje popis popularnih vijesti, izgled koji se može konfigurirati u datoteci topnews.tpl, više o tome u nastavku.
Kod naše oznake trebao bi izgledati ovako:
(topnews) Pa, sad još samo moramo postaviti same vijesti.
Otvorite datoteku t opnews.tpl i na samom početku unesite sljedeće:
na samom kraju zatvaramo atribut

Ako koristite jedan od mojih predložaka s Bootstrapom, tada kao opciju možete koristiti sljedeće retke u datoteci topnews.tpl:
(title limit="55")

(ograničenje teksta="100")

Pročitajte vijesti bit će prikazane ovako

Ovaj se dodatak može koristiti gotovo bilo gdje, također pomoću oznake (prilagođena kategorija)
Također može zamijeniti standardnu DLE galeriju, o tome ću objaviti poseban članak. Uživajte za svoje zdravlje ;)

Srdačan pozdrav, admin. preuzimanje Pažnja: Dosegnuto je ograničenje preuzimanja. Dođi sutra =)