Skapa en slider med Cycle2 2


Idag ska vi skapa en slider med Cycle2 som är ett jQuery tillägg. Det första du behöver är jQuery och Cycle2. Sedan skapar du ett nytt projekt med din favorit textredigerare (bra alternativ » Sublime Text 2Aptana Studio & NetBeans). Du ska skapa två mappar i roten av projektet; css & js där js ska innehålla jQuery och Cycle2, i css skapar du en ny stilmall, t.ex. style.css och till sist ett HTML dokument i roten av projektet; index.htm.

Enkel att använda…

Cycle2 är super enkel att använda och jag blev kär vid första slidern! Du behöver inte koda en rad JavaScript utan allt tas om hand av Cycle2 genom uppmärkning och HTML data attribut. Till en början ska vi markera upp index.htm med en div runt alla bilderna:

Vi placerar slidern i mitten av sidan och sätter position till relative så att dess barn (img) kan placeras absolute. och vi sätter även overflow till hidden för #slider så att bilderna inte sticker ut:

…och till sist Cycle magi genom att ge den omslutande div#slider klassnamnet:

cycle-slideshow som kommer att indikera för Cycle2 att det är här vi har en div som innehåller bilder

och en data attribut »

data-cycle-fx (som anger hur slidern växlar bild)

med värdet scrollHorz som betyder scrolla horisontellt

…och data-cycle-timeout (som anger frekvensen för hur ofta bilden ska växlas)

med värdet 3000 millisekunder (3 sekunder).


Hela koden

Och här kommer hela koden till slidern.

HTML

CSS

Som sagt ingen JavaScript och nu ska din nya slider fungera, lätt som en plätt!


Länk på bilderna

Du kan även länka bilderna genom att omsluta bilderna med en ankar-tagg och sedan ange data attributet data-cycle-slides i den omslutande div elementet med klassen cycle-slideshow och ge den värdet ”> a”:

 

Slider med textinnehåll

Det går att skapa en slider med textinnehåll genom att ange data attribut data-cycle-slides i omslutande div elementet och ge den värdet ”> element” där ”mer än” tecknet efterföljs av elementet. Här kommer koden för en slider som har textinnehåll:

 

Extra funktioner

Det finns en massa funktioner till Cycle2 och alla fungerar genom att man lägger till data attribut av specifikt slag, och som jag sa tidigare anger data-cycle-fx hur slidernväxlar bild, dvs. om bilden ska glida åt sidan, zooma in, zooma ut, + många fler, och här nedanför ser du ett gäng olika värden för data-cycle-fx:

 

Pager

Man kan lägga till en pager genom att först skapa en div:

…och sedan ange ytterligare data attribut i cycle-slideshow diven:

Och så vidare du hittar alla dom olika attributen på Cycle2’s hemsida.

 


Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

2 tankar om “Skapa en slider med Cycle2