Skapa en slider med Cycle2

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:

<!doctype html>
<html lang="sv-SE">
<head>
	<meta charset="UTF-8" />
	<title>Cycle2 Slider | cr8gr8designs.com</title>
	<meta name="author" content="Daniel Karjanlahti" />
	<meta name="keywords" content="Cycle2, Slider, jQuery, data-attribute" />
</head>
<body>
	<div id="slider">
	     <img src="res/blackwhiteintel.jpg" />
	     <img src="res/colorring.jpg" />
	     <img src="res/fairymeetsalien.jpg" />
	     <img src="res/futureworkstation.jpg" />
        </div>

<!-- och så klart jQuery & Cycle2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>

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:

#slider {
	position: relative;
	width:1024px;
	height:546px; 
	margin: 60px auto; 
	overflow: hidden;
}
img {
	position: absolute;
	width: 100%;
	height: 100%;
}

…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).

<div id="slider" class="cycle-slideshow"
	data-cycle-fx="scrollHorz"
	data-cycle-timeout="3000">

	<img src="res/blackwhiteintel.jpg" />
	<img src="res/colorring.jpg" />
	<img src="res/fairymeetsalien.jpg" />
	<img src="res/futureworkstation.jpg" />
</div>

 

Hela koden

Och här kommer hela koden till slidern.

HTML

<!doctype html>
<html lang="sv-SE">
<head>
	<meta charset="UTF-8" />
	<title>Hem | cr8gr8designs.com</title>
	<meta name="author" content="Daniel Karjanlahti" />
        <meta name="keywords" content="Cycle2, Slider, jQuery, data-attribute" />
</head>
<body>
	<div id="slider" class="cycle-slideshow"
		data-cycle-fx="scrollHorz"
		data-cycle-timeout="3000">

		<img src="res/blackwhiteintel.jpg" />
		<img src="res/colorring.jpg" />
		<img src="res/fairymeetsalien.jpg" />
		<img src="res/futureworkstation.jpg" />
	</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>

CSS

#slider {
	position: relative;
	width:1024px; /* bredden på bilderna */
	height:546px; /* höjden på bilderna */
	margin: 60px auto; 
	overflow: hidden;
}
img {
	position: absolute;
	width: 100%;
	height: 100%;
}

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

Demo slider » här

Ladda ner källkoden » cycle2_slider_demo

 

 

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”:

<div class="cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="2000"
    data-cycle-slides="> a">

    <a href="http://cr8gr8designs.com">
        <img src="res/bild.jpg" >
    </a>
    <a href="http://cr8gr8designs.com">
        <img src="res/bild.jpg" >
    </a>
    <a href="http://cr8gr8designs.com">
        <img src="res/bild.jpg" >
    </a>
</div>

 

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:

<div id="slider" class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="3000"
data-cycle-slides="> div">
	<div><!-- Hit ska textinnehållet --></div>
	<div><!-- Hit ska textinnehållet --></div>
	<div><!-- Hit ska textinnehållet --></div>
	<div><!-- Hit ska textinnehållet --></div>
</div>

 

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:

scrollHorz » glider åt sidan
carousel   » bilderna ligger i en rad och glider åt sidan
flipHorz   » flippar runt bilden horisontellt
flipVert   » lippar runt bilden vertikalt
shuffle    » byter bild genom att den "blandar" bilderna
tileSlide  » remsor som faller ner
tileBlind  » persienn som vänds kan modifieras ytterligare genom att särtta data-cycle-tile-vertical till false och ange antal remsor med data-cycle-tile-count

 

Pager

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

<div class="cycle-pager"></div>

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

data-cycle-pager=".cycle-pager"

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

 

Skapa en slider med Cycle2

Lämna ett svar

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

Rulla till toppen