Skip to content

Instantly share code, notes, and snippets.

@lamprosg
Created August 6, 2012 15:13
Show Gist options
  • Select an option

  • Save lamprosg/3275321 to your computer and use it in GitHub Desktop.

Select an option

Save lamprosg/3275321 to your computer and use it in GitHub Desktop.
JQuery Cycle Plugin – Basic Example
$('#slide1').cycle({
fx: 'scrollDown',
speed: 300,
timeout: 2000
});
/*Effect you can Choose and apply
* blindX
* blindY
* blindZ
* cover
* curtainX
* curtainY
* fade
* fadeZoom
* growX
* growY
* scrollUp
* scrollDown
* scrollLeft
* scrollRight
* scrollHorz
* scrollVert
* shuffle
* slideX
* slideY
* toss
* turnUp
* turnDown
* turnLeft
* turnRight
* uncover
* wipe
* zoom */
//Download: http://jquery.malsup.com/cycle/download.html
/* width and height css style for Images */
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
/* css style added for slider Images */
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
<div id="slide1" class="pics">
<img src="images/beach1.jpg" width="200" height="200">
<img src="images/beach2.jpg" width="200" height="200">
<img src="images/beach3.jpg" width="200" height="200">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment