Sadržaj
Napravit ćemo klizač razvijen s
Jquery Y
Klizač Nivo, bez potrebe za dodatkom i koji se možemo prilagoditi našoj web stranici.
Da bismo to učinili, upotrijebit ćemo
Jquery okvir, što je a
knjižnica za olakšavanje rada s Javascript jezikom. Knjižnicu preuzimamo s
Jquery.com, također je moguće da ga možete koristiti povlačenjem
googleapis.com pomoću ovog koda na vašoj html stranici za dodavanje ove skripte.
Ako ste ga preuzeli sa stranice Jquery i prenijeli u direktorij na svojoj web stranici, morate ga postaviti tako da pokazuje na vašu domenu kao sljedeći primjer:
Sada preuzmemo
Klizač Nivo što je
Jquery knjižnica koja će nam omogućiti stvaranje klizača. Odavde možete besplatno preuzeti Nivo slider. Raspakirajte datoteku u našem direktoriju, ovdje možemo vidjeti strukturu weba.
Sada ćemo stvoriti datoteku index.html za našu web stranicu, u zaglavlje ćemo staviti knjižnice i stilske tablice. Možemo vidjeti knjižnicu Jquery, biblioteku klizača nivo i vlastite tablice stilova klizača Nivo, a zatim ih možemo prilagoditi.
Sada ćemo stvoriti spremnik za naše slike i za klizač, za to i da bismo ga mogli prikazati, kreiran je unutar istog index.html (Može se stvoriti i u datoteci sa stilom CSS -a, kako bi odgovarao svaki).
Počinjemo sa strukturom weba i samog klizača, umetanjem slika za prikaz i poruke.
Zatim aktiviramo dodatak nivo Silder i šaljemo mu parametre o vrsti učinka, vremenu između animacije, pauziranju između slike i još mnogo toga što se može vidjeti u dokumentaciji Nivo Slider.
Uočimo da je id aktiviran
#slabiji isti onaj gdje definiram slike, pa ako želim imati više od jednog klizača morat ću replicirati istu strukturu i aktivirati je za odgovarajući id.
Rezultat testiranja index.html u pregledniku je:
Ovdje vidimo drugi slajd, ispod vidimo broj slajdova 1 i 2, a zadane veze Prethodna (prethodna) Sljedeća (sljedeća) poboljšat ćemo prikaz toga pomoću css -a.
Brojeve možemo promijeniti u metke jednostavno gledajući nivo-silder.css
.nivo-controlNav {text-align: left; punjenje: 0; položaj: relativan; z-indeks: 10; } .nivo-controlNav za {display: inline-block; širina: 10px; visina: 10px; pozadina: url (bullets.png.webp) bez ponavljanja; uvlačenje teksta: -9999px; granica: 0; marža: 0 2px; } .nivo-controlNav a.aktivan {background-position: 0 100%; } .nivo-directionNav za {display: block; širina: 30px; visina: 30px; pozadina: url (strelice.png.webp) bez ponavljanja; uvlačenje teksta: -9999px; granica: 0; gore: auto; dno: -36px; z-indeks: 11; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; rub-radijus: 2px; } a.nivo-nextNav {background-position: 160% 50%; desno: 0px; } a.nivo-prevNav {background-position: -60% 50%; lijevo: auto; desno: 35px; } Rezultat ove promjene bit će brojevi u obliku meta s lijeve strane i veze kao strelice udesno.
Proširit ćemo funkcionalnost prikazivanjem bloka podataka na jednom od slajdova
Modificirajući kod koji već imamo, mijenjamo odlomak u slajdu 2 za blok koji ću pozvati s id # block2, zatim stvaram blok i primjenjujem skriveni stil tako da bude vidljiv samo kada je slajd 2 aktiviran.
Rezultat je sljedeći:
Također možete staviti minijaturne slike. Druga je mogućnost dinamičko generiranje sadržaja iz mysql -a i php -a ili njegovo korištenje u CMS predlošku kao što su joomla ili wordpress. Dolazi s mnogim programiranim dodacima, ali s nekoliko redaka koda možemo stvoriti vlastitu komponentu. Nadam se da vam je poslužio.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
