Dezinsekcija
Stvaranje klizača pomoću Bootstrapa. Kako izraditi vlastiti bootstrap klizač u nekoliko jednostavnih koraka Responzivni vrtuljak za bootstrap 3

Stvaranje klizača pomoću Bootstrapa. Kako izraditi vlastiti bootstrap klizač u nekoliko jednostavnih koraka Responzivni vrtuljak za bootstrap 3

Twitter Bootstrap 3 jedan je od najboljih CSS okvira za razvoj i održavanje sustava za upravljanje sadržajem. S Bootstrapom možete jednostavno kreirati blogove ili portfelje koristeći Twitter Bootstrap grid sustav (grid layout). U srcu mnogih CMS sustava obično imamo osnovnu komponentu koja se zove "Slider" (Carousel), u osnovi je to automatski sekvencijalni prikaz slika, ali također može prikazati najnovije dovršene projekte, izjave vaših kupaca, opis posebnih ponude, poveznice na vijesti ili nedavne članke s bloga. U ovom ćemo članku pogledati kako izraditi klizač pomoću komponente Carousel u Twitter Bootstrap 3.

Uvod u Bootstrap 3 Carousel Twitter komponentu

Oznaka za komponentu vrtuljka izgleda ovako:

>
>

...
>
>
...
>

>
>

>
>
>

Iz gornjeg koda možemo vidjeti da je Bootstrap 3 klizač podijeljen u nekoliko dijelova:

Pokazivači
Sadržaj klizača
Kontrole

Za transformaciju elementa div u klizač dodajemo nazive klasa: karusel i tobogan. Klasa karusel stvara efekt "vrtuljka", odnosno mijenja slajdove u krug. Klasa tobogan dodaje kliznu animaciju s desne ili lijeve strane. Pokazivači su kružići na dnu klizača, oni označavaju trenutni položaj slajda i broj slajdova. Pokazivači se stvaraju pomoću uređene liste.

>
>

Uređena lista ima klasu pokazivači vrtuljka, koji transformira podređene elemente u male krugove. Svaki element li mora imati atribut meta podataka s nadređenim ID-om spremnika. Također mora imati atribut data-slide-to s jedinstvenom numeričkom vrijednošću, za upućivanje na određeni slajd, vrijednosti moraju započeti s "0".

...
>
>
...
>

Svaki element s klasom artikal ima dva pododjeljka: slika i karusel-natpis. Slika se koristi kao pozadina za slajd. Element s klasom karusel-natpis postavljen iznad slike i koristi se kao naslov slajda. Unutra karusel-natpis, možemo dodati

ili oznake, ili čak oboje.

Kontrola se vrši lijevom i desnom strelicom, njima se ručno mijenjaju slajdovi.

"glyphicon glyphicon-chevron-lijevo"> >
>

"glyphicon glyphicon-chevron-desno"> >
>
>

Moraju postojati dva elementa: po jedan za svaki smjer. Prvi element će imati raspon element s klasama glifikon glifikon-ševron-lijevo, što je ikona lijeve strelice, a drugi element će imati klase glifikon glifikon-ševron-desno, to je strelica udesno. U Bootstrapu možemo koristiti fontove umjesto slika za prikaz ikona.

To je sve! Uspješno ste izradili klizač za svoju stranicu. Također, niste napisali niti jednu liniju JavaScript koda, ali je bootstrap.js učinio sve umjesto vas.

postavke vrtuljka

Da biste dodatno prilagodili klizač, možete dodati nekoliko atributa podaci-* za roditeljski spremnik karusela.

"podatkovni interval" koristi se za određivanje vremenskog intervala između prebacivanja slajdova. Uzima numeričku vrijednost, a broj mora biti u milisekundama.
"podaci-pauza" koristi se za određivanje kada će se aktivirati događaj pauze. Na primjer, kada je jednak " lebdjeti", prebacivanje slajdova se zaustavlja kada je miš iznad klizača.
"omatanje podataka" je booleov atribut i omogućuje vam da postavite hoćete li nastaviti mijenjati slajdove ako se dosegne kraj popisa slajdova.

Prilagodba s jQueryjem

Ako želite koristiti jQuery i data-* atribute, Bootstrap dopušta inicijalizaciju s JavaScriptom. Da biste to učinili, možete napisati sljedeći kod:

$(".vrtuljak" ) .vrtuljak() ;

Postavke vrtuljka mogu se postaviti pomoću opcija. Na primjer:

$(".vrtuljak")
interval: 2000
pauza: "lebdjeti",
omot: istina
} ) ;

Događaje klizača možete pokrenuti i ručno pomoću sljedećeg koda:

.vrtuljak("pauza") // pauza
.carousel("ciklus") // omogući slajdove
.vrtuljak(3) // prikaži četvrti slajd
.carousel("prev") // prikaži prethodni slajd
.carousel("next") // prikaži sljedeći slajd

Gore navedene metode mogu se pozvati iz bilo kojeg JavaScript koda za kontrolu normalnog rada klizača. Smatram da su prev i next metode vrlo korisne ako želim prikazati vlastite gumbe umjesto standardnih strelica. Pogotovo kada su izvan izgleda karusela.

Zaključak

Ovaj bi članak trebao biti od pomoći onima koji žele naučiti kako izraditi klizač bez pisanja tisuća redaka JavaScript koda. Bez sumnje, to će povećati brzinu razvoja. Što je najvažnije, ovo rješenje je cross-browser, tako da ne morate čupati kosu da bi radilo u starijim preglednicima.

Ako imate pitanja, upotrijebite naš

Komponenta dijaprojekcije za ciklične elemente - vrtuljak sa slikama ili tekstualne slajdove.

Kako radi

Vrtuljak je dijaprojekcija za prikazivanje niza sadržaja temeljenog na CSS 3D transformacijama i nekim JS-ovima. Radi s tekstom, slikama ili uobičajenim oznakama. Također podržava sljedeće/prethodne gumbe.

Primjer

Vrtuljak ne normalizira automatski veličinu sadržaja slajda. Stoga će vam možda trebati dodatni uslužni programi da njihov sadržaj bude odgovarajuće veličine. Sve dok vrtuljci podržavaju gumbe prethodni/sljedeći, ne moraju se eksplicitno dodavati. Dodajte ih i prilagodite sami.

Dajte jedinstveni ID klasi .carousel radi fleksibilnosti, posebno ako koristite mnogo vrtuljaka na stranici.

Samo slajdovi

Evo primjera vrtuljka sa samo toboganima. Obratite pažnju na prisutnost klasa .d-block i .img-fluid u slikama vrtuljka - njihova je svrha spriječiti preglednik da zadano poravna slike.

S kontrolama

Dodaje gumbe prethodno/sljedeće:

S indikatorima

Također možete dodati indikatore na vrtuljak zajedno s kontrolama.

Zahtijeva početni aktivni element

Klasa .active mora biti dodana jednom od slajdova, inače vrtuljak neće biti vidljiv.

S natpisima

Dodajte opise svojim slajdovima dodavanjem elementa klase .carousel-caption u bilo koji element klase .carousel-item. Oznake je lako sakriti na manjim uređajima pomoću uslužnih programa za prikaz. Oni su u početku skriveni s klasom .d-none i ponovno ih se prikazuju na srednjim uređajima s klasom .d-md-block.

Oznaka prvog slajda

Nulla vitae elit libero, a pharetra augue mollis interdum.

Oznaka drugog slajda

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Oznaka trećeg slajda

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

"carousel-caption d-none d-md-block">

...

Korištenje

Kroz atribute

Data-slide atribut uzima vrijednosti prev ili next, koje mijenjaju položaj slajda u odnosu na njegov trenutni položaj. Ili upotrijebite data-slide-to za navigaciju do slajda u indeksu, poput 2: data-slide-to="2" , indeksi slajdova počinju od 0 .

Atribut data-ride="carousel" koristi se za stvaranje animacije vrtuljka. Ne može se kombinirati s eksplicitnom inicijalizacijom vrtuljka putem JavaScripta.

Preko JavaScripta

Pozovite karusel ručno:

$(".vrtuljak"). karusel()

Mogućnosti

Parametri se mogu proslijediti kroz atribute ili JavaScript. Za korištenje atributa dodajte naziv parametra u data- , na primjer: data-interval="" .

Ime	Vrsta	Standardno	Opis
interval	broj	5000	Vrijeme odgode između automatskih promjena slajdova. Ako je lažno, vrtuljak neće automatski mijenjati slajdove.
tipkovnica	Booleov	pravi	Hoće li vrtuljak reagirati na događaje tipkovnice.
pauza	niz \| Booleov	lebdjeti	Ako je postavljeno "lebdjenje", promjena slajdova se usporava tipkom mouseenter, a promjena počinje tipkom mouseleave. Ako je postavljeno na lažno, postavljanje pokazivača iznad vrtuljka neće zaustaviti promjenu slajdova. Uređaji koji se aktiviraju dodirom: "lebdjenje" - pauzirajte na dodirnom dijelu (kada korisnik završi interakciju s vrtuljkom) dva intervala, a zatim ponovno promijenite slajdove. Imajte na umu da je ovo ponašanje dodatak gore opisanom ponašanju miša.
vožnja	crta	lažno	Automatska promjena slajdova na vrtuljku nakon prve ručne promjene slajdova od strane korisnika. Ako je karusel - automatska promjena je omogućena nakon učitavanja.
omotati	Booleov	pravi	Treba li se vrtuljak mijenjati glatko ili diskretno.

Metode

Asinkrone metode i prijelazi

Sve API metode asinkroni i lansirati tranzicija. Oni se vraćaju na funkciju koja ih je pozvala kada prijelaz započne, ali do kraja. Plus, pozivanje metode na komponenti, izvođenje prijelaza bit će zanemareno.

.vrtuljak (opcije)

Inicijalizira objekt vrtuljka s navedenim opcijama i pokreće prijelaz slajdova.

$(".vrtuljak"). vrtuljak (( interval : 2000 ))

.vrtuljak("ciklus")

Mijenja klizanje karusela slijeva nadesno.

.vrtuljak("pauza")

Zaustavlja prijelaz slajdova.

.vrtuljak(broj)

Pomicanje klizi do određene točke (na bazi 0, slično redovima).

.carousel("pret")

Pomiče se na prethodni slajd. Vraća vrijednost poziva funkcije prije nego što se prikaže element "target".(tj. prije pokretanja događaja slid.bs.carousel).

.carousel("sljedeće")

Na sljedeći slajd. Vraća vrijednost poziva funkcije prije nego što se prikaže element "target".(tj. prije pokretanja događaja slid.bs.carousel).

.carousel("dispose")

Uništava karusel predmeta.

Razvoj događaja

Vrtuljak u Bootstrapu ima 2 događaja za primjenu funkcionalnosti. Oba događaja imaju sljedeća dodatna svojstva:

smjer: smjer u kojem se slajdovi kreću ("lijevo" ili "desno").
relatedTarget: DOM element koji se pomiče na položaj "pomaknutog" slajda.
from: Indeks trenutnog slajda
do: Indeks sljedećeg slajda

Svi događaji na vrtuljku pokreću se izravno na vrtuljku (tj. u

$("#myCarousel" ). na ("slide.bs.carousel" , funkcija () ( // učini nešto… ))

Dobar dan svima koji žele naučiti nešto novo od elemenata Bootstrap frameworka. Današnja tema je klizač Bootstrap Carousel. Ovo je popularan element koji je prisutan na gotovo svakoj web stranici.

Stoga ću vam reći kako stvoriti klizač vrtuljka, koji su ugrađeni alati potrebni za to, kako možete konfigurirati parametre, a na kraju članka pokazat ću implementaciju konkretnog primjera. A sada se bacite na posao!

Sve o alatima Bootstrap Carousel Plugin

Karusel galerija fotografija koristi se za predstavljanje novih ponuda, proizvoda, popis aktualnih akcija, pogodan pregled portfelja itd. Stoga je danas važno moći raditi s ovim dodatkom pod službeni naziv Bootstrap Carousel dodatak.

Treba odmah napomenuti da opisani element nije pravilno podržan u Internet Exploreru 9 i ranijim verzijama. Međutim, radi odlično u (za WordPress, Joomla! i druge motore, povezivanje okvira je vrlo jednostavno).

Kako biste lako radili sa svim parametrima i brzo prilagodili klizač, morate naučiti glavne ugrađene klase Bootstrapa 3.

Klasa	Svrha
karusel	Sam stvara klizač vrtuljka.
tobogan	Uz css dodaje učinak animacije i prijelaza tijekom prebacivanja između slajdova. Predavanje je izborno.
pokazivači vrtuljka	Dodaje, da tako kažem, upravljačku ploču u obliku malih točkica na dnu svake slike, pomoću koje se možete brzo prebaciti na bilo koju sliku. Predavanje je izborno.
vrtuljak-unutarnji	Dodaje same slajdove u galeriju.
karusel-natpis	Odgovoran za potpisivanje grafičkih datoteka. Može se uključiti po želji.
artikal	Definira skup sadržaja za svaki slajd.
Kontrola vrtuljka desno/lijevo	Dodaje desni i lijevi gumb prema nazivu za prebacivanje između okvira.

Osim toga, vrijedi znati i druge značajke izgleda takvih galerija.

Za početak, stvaranje samog bloka vrtuljka zahtijeva deklaraciju id="myCarousel" za ispravno funkcioniranje potonjeg.

U istom divu morate registrirati atribut data-ride="vrtuljak", što navodi da se animacija treba učitati čim se stranica učita.

Sada prijeđimo na indikatore. Svaka li oznaka treba imati nekoliko atributa: meta podataka, koji ukazuje na ID određenog vrtuljka i data-slide-to, koji određuje na koji broj okvira ići.

Što se tiče gumba koji prebacuju slike naprijed ili natrag, da biste ih implementirali, vrijedi registrirati atribut data-slide s ključnom riječi "prethodno" ili "sljedeće".

Sada znate o osnovnim elementima okvira, zahvaljujući kojima možete urediti prikaz klizača na određeni način. Naravno, možete onemogućiti automatsko pomicanje okvira, opise slika ili bočne tipke.

Alternativni kontrolni mehanizmi

Osim korištenja Bootstrapovih ugrađenih klasa, također možete pogledati . Dakle, postoji mnogo metoda i opcija u JS-u koje implementiraju sve iste radnje, samo putem alata $.carousel (). Među njima se mogu navesti kao što su:

provjera znanja

Pa, sada je vrijeme da provjerite kako ste naučili gradivo i učvrstite stečeno znanje. Da biste to učinili, opisat ću svaku radnju koju ćete morati poduzeti na putu stvaranja "Vrtuljka".

Prvo morate uključiti potrebne skripte i stilove. Više volim, ali okvir možete preuzeti sa službene web stranice ( http://getbootstrap.com/) i smjestite preuzete datoteke u korijen direktorija projekta.

Ako se slažete sa mnom, u zaglavlju dokumenta pišemo:

1 2 3

Ako ste pristaša druge metode, tada umjesto prvog dijela veze trebate umetnuti put do datoteke.

Sada ostaje implementirati u klizač. Da biste to učinili, koristite svoje stečeno znanje i napišite potrebne dijelove koda redom:

otvaranje zajedničkog bloka odgovornog za opisani instrument;
blok za određivanje kontrolnih indikatora;
blok za same slajdove;
implementacija bočnih gumba.

Samo drugi i posljednji div mogu se isključiti s ovog popisa.

Sada ste definitivno spremni za pisanje koda.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

Primjer karuselne galerije

/*Stvori glavni blok*/

/*Punjenje slajdova*/

Primjer karuselne galerije

/*Stvori glavni blok*/

/*Navedite 4 indikatora prema broju slika*/ /*Popunite slajdove*/ /*Stvorite bočne kontrolne gumbe*/

Komponenta dijaprojekcije za ponavljanje kroz elemente slike ili slajdove s tekstom na vrtuljku. U preglednicima koji podržavaju Page Visibility API, vrtuljak će izbjeći promjenu slajdova kada web stranice nisu vidljive korisniku (na primjer, kada je preglednik neaktivan, prozor preglednika je minimiziran, itd.). Ugniježđeni karuseli nisu podržani.

Primjer

Internet Explorer 9 ne podržava animacije

Bootstrap isključivo koristi CSS3 za animaciju, ali Internet Explorer 9 ne podržava potrebna CSS svojstva. Stoga nema animacije prijelaza slajdova kada koristite ovaj preglednik. Namjerno smo odlučili ne uključiti zamjenske opcije temeljene na jQueryju za prijelaze.

Potreban je početni aktivni element

Klasa .active mora se dodati jednom od slajdova. U suprotnom, vrtuljke neće biti vidljive.

Dodatni naslovi

Jednostavno dodajte naslove svojim slajdovima pomoću elementa .carousel-caption u bilo kojoj .carousel-item. Tamo stavite otprilike dodatni HTML i on će se automatski poravnati i formatirati.

oznaka prvog slajda

Nulla vitae elit libero, a pharetra augue mollis interdum.

oznaka drugog slajda

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

oznaka trećeg slajda

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

...

Problem s pristupačnošću

Komponenta vrtuljka uopće ne zadovoljava standarde pristupačnosti. Ako vam je potrebna kompatibilnost, razmotrite druge načine predstavljanja vašeg sadržaja.

Korištenje

Više vrtuljaka

Vrtuljci zahtijevaju upotrebu ID-a na krajnjem vanjskom spremniku (u .carouselu) za upravljanje vrtuljkom kako bi pravilno funkcionirao. Kada dodajete više karusela ili kada mijenjate ID vrtuljka, svakako ažurirajte odgovarajuće kontrole.

S ovim atributima

Pomoću atributa podataka lako je kontrolirati položaj vrtuljka. data-slide može se zatražiti pomoću prev ili next , što mijenja položaj klizača u odnosu na njegov trenutni položaj. Alternativno, upotrijebite data-slide-to za prosljeđivanje indeksa neobrađenog slajda vrtuljka na data-slide-to="2" , koji pomiče položaj slajda s definicijama indeksa počevši od 0 .

Atribut data-ride="carousel" koristi se za označavanje vrtuljka kao animacije koja počinje od učitavanja stranice. Ne može se koristiti u kombinaciji s (nepotrebno) eksplicitnom JavaScript inicijalizacijom istog vrtuljka.