Innehållsförteckning
Vi ska skapa ett reglage utvecklat med
Jquery Y
Nivo Slider, utan behov av ett plugin och att vi kan anpassa oss till vår webbplats.
För att göra detta kommer vi att använda
Jquery -ramverk, Vilket är en
bibliotek för att underlätta arbetet med Javascript -språket. Vi laddar ner biblioteket från
Jquery.com, det är också möjligt att du kan använda den genom att dra
googleapis.com använder den här koden på din html -sida för att lägga till detta skript.
Om du har laddat ner den från Jquery -sidan och laddat upp den till en katalog på din webbplats måste du ange den för att peka på din domän som följande exempel:
Nu ska vi ladda ner
Nivo -reglage vad är
Jquery -bibliotek som gör att vi kan skapa reglaget. Härifrån kan du ladda ner Nivo -reglaget gratis. Packa upp filen i vår katalog, här kan vi se strukturen på webben.
Nu ska vi skapa en index.html -fil för vår webbplats, i sidhuvudet kommer vi att lägga till bibliotek och stilark. Vi kan se Jquery -biblioteket, nivåreglage -biblioteket och Nivo -reglagens egna stilark, sedan kan vi anpassa dem.
Nu ska vi skapa en behållare för våra bilder och för reglaget, för detta och för att kunna visa det skapades det inom samma index.html (Det kan också skapas i en CSS -stilarkfil, för att passa varenda en).
Vi börjar med strukturen på webben och själva reglaget, infogar bilderna som ska visas och ett meddelande.
Sedan aktiverar vi nivå Silder -plugin och skickar parametrar om typen av effekt, tid mellan animering, paus mellan bild och många fler som kan ses i Nivo Slider -dokumentationen.
Låt oss observera att id är aktiverat
#silder samma där jag definierar bilderna, så om jag vill ha mer än ett reglage måste jag replikera samma struktur och aktivera den för motsvarande id.
Resultatet av att testa index.html i en webbläsare är:
Här ser vi den andra bilden, nedan ser vi antalet bilder 1 och 2, och standardlänkarna Föregående (föregående) Nästa (nästa) kommer vi att förbättra synen på det med hjälp av css.
Vi kan ändra siffrorna till kulor helt enkelt genom att titta på nivå-silder.css
.nivo-controlNav {text-align: left; vaddering: 0; position: relativ; z-index: 10; } .nivo-controlNav till {display: inline-block; bredd: 10px; höjd: 10px; bakgrund: url (bullets.png.webp) no-repeat; text -indent: -9999px; gräns: 0; marginal: 0 2px; } .nivo-controlNav a.active {bakgrundsposition: 0 100%; } .nivo-directionNav till {display: block; bredd: 30px; höjd: 30px; bakgrund: url (pilar.png.webp) ingen upprepning; text -indent: -9999px; gräns: 0; överst: auto; botten: -36px; z-index: 11; } .nivo-directionNav a: sväva {bakgrund-färg: #eee; -webkit-gräns-radie: 2px; -moz-border-radie: 2px; gränsradie: 2px; } a.nivo-nextNav {bakgrundsposition: 160% 50%; höger: 0px; } a.nivo-prevNav {bakgrundsposition: -60% 50%; vänster: auto; höger: 35px; } Resultatet av denna förändring blir siffrorna som kulor till vänster och länkarna som pilar till höger.
Vi kommer att utöka funktionaliteten genom att visa ett block av data i en av bilderna
Genom att ändra koden som vi redan har ändrar vi stycket i bild 2 för ett block som jag kommer att ringa med ett id # block2, sedan skapar jag blocket och tillämpar en dold stil så att den bara syns när bild 2 är aktiverat.
Resultatet är följande:
Du kan också lägga till miniatyrbilder. Ett annat alternativ är att generera innehållet dynamiskt från en mysql och php eller använda det i en CMS -mall som joomla eller wordpress. Den levereras med många plugins som redan är programmerade men med några koderader kan vi skapa vår egen komponent. Jag hoppas att det har tjänat dig.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
