Satura rādītājs
Mēs izveidosim slīdni, kas izstrādāts ar
Jquery Y
Nivo slīdnis, bez spraudņa un ka mēs varam pielāgoties savai vietnei.
Lai to izdarītu, mēs izmantosim
Jquery ietvars, kas ir a
bibliotēku, lai atvieglotu darbu ar Javascript valodu. Mēs lejupielādējam bibliotēku no
Jquery.com, iespējams arī to izmantot, velkot
googleapis.com izmantojot šo kodu savā html lapā, lai pievienotu šo skriptu.
Ja esat to lejupielādējis no Jquery lapas un augšupielādējis savā vietnes direktorijā, jums tas jānorāda, lai norādītu uz jūsu domēnu, kā parādīts šajā piemērā:
Tagad lejupielādēsim
Nivo slīdnis kas ir
Jquery bibliotēka, kas ļaus mums izveidot slīdni. Šeit jūs varat bez maksas lejupielādēt slīdni Nivo. Izsaiņojiet failu mūsu direktorijā, šeit mēs varam redzēt tīmekļa struktūru.
Tagad mēs savai vietnei izveidosim failu index.html, galvenē mēs ievietosim bibliotēkas un stila lapas. Mēs varam redzēt Jquery bibliotēku, nivo slīdņu bibliotēku un paša Nivo slīdņa stila lapas, pēc tam tās varam pielāgot.
Tagad mēs izveidosim konteineru saviem attēliem un slīdnim, lai to varētu parādīt, tas tika izveidots tajā pašā index.html (to var izveidot arī CSS stila lapas failā, lai tas atbilstu katrs).
Mēs sākam ar tīmekļa struktūru un pašu slīdni, ievietojot parādāmos attēlus un ziņojumu.
Pēc tam mēs aktivizējam spraudni nivo Silder un nosūtām tam parametrus par efekta veidu, laiku starp animāciju, pauzi starp attēlu un daudz ko citu, ko var redzēt Nivo Slider dokumentācijā.
Ievērojam, ka id ir aktivizēts
#sildnieks tas pats, kur es definēju attēlus, tādēļ, ja es vēlos, lai būtu vairāki slīdņi, man būs jāatkārto tā pati struktūra un jāaktivizē tā atbilstošajam ID.
Index.html pārbaudes rezultāts pārlūkprogrammā ir šāds:
Šeit mēs redzam otro slaidu, zemāk mēs redzam 1. un 2. slaidu skaitu un noklusējuma saites Iepriekšējā (iepriekšējā) Nākamā (nākamā) mēs uzlabosim skatu uz to, izmantojot css.
Mēs varam mainīt ciparus uz aizzīmēm, vienkārši apskatot nivo-silder.css
.nivo-controlNav {text-align: left; polsterējums: 0; stāvoklis: radinieks; z-indekss: 10; } .nivo-controlNav to {display: inline-block; platums: 10 pikseļi; augstums: 10 pikseļi; fons: url (bullets.png.webp) no-pakartot; teksta atkāpe: -9999 pikseļi; robeža: 0; mala: 0 2 pikseļi; } .nivo-controlNav a.active {fona pozīcija: 0 100%; } .nivo-directionNav līdz {display: block; platums: 30 pikseļi; augstums: 30 pikseļi; fons: url (arrows.png.webp) no-pakartot; teksta atkāpe: -9999 pikseļi; robeža: 0; augšā: auto; apakšā: -36 pikseļi; z-indekss: 11; } .nivo-directionNav a: virziet kursoru {background-color: #eee; -webkit-border-rādiuss: 2 pikseļi; -moz-border-rādiuss: 2 pikseļi; robežas rādiuss: 2 pikseļi; } a.nivo-nextNav {fona pozīcija: 160% 50%; pa labi: 0 pikseļi; } a.nivo-prevNav {fona pozīcija: -60% 50%; pa kreisi: auto; pa labi: 35 pikseļi; } Šo izmaiņu rezultātā skaitļi kā aizzīmes pa kreisi un saites kā bultiņas pa labi.
Mēs paplašināsim funkcionalitāti, parādot datu bloku vienā no slaidiem
Mainot kodu, kas mums jau ir, mēs nomainām rindkopu 2. slaidā uz bloku, kuram zvanīšu ar ID # block2, tad izveidoju bloku un lietoju slēpto stilu, lai tas būtu redzams tikai tad, kad ir aktivizēts 2. slaids.
Rezultāts ir šāds:
Varat arī ievietot sīktēlus. Vēl viena iespēja ir dinamiski ģenerēt saturu no mysql un php vai izmantot to CMS veidnē, piemēram, joomla vai wordpress. Tam ir jau ieprogrammēti spraudņi, taču ar dažām koda rindām mēs varam izveidot savu komponentu. Es ceru, ka tas jums ir kalpojis.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
