|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
|
|
<title>Slides, A Slideshow Plugin for jQuery</title> |
|
|
|
<style type="text/css" media="screen"> |
|
/* |
|
Load CSS before JavaScript |
|
*/ |
|
|
|
/* |
|
Slides container |
|
Important: |
|
Set the width of your slides container |
|
Set to display none, prevents content flash |
|
*/ |
|
.slides_container { |
|
width:470px; |
|
display:none; |
|
} |
|
|
|
/* |
|
Each slide |
|
Important: |
|
Set the width of your slides |
|
If height not specified height will be set by the slide content |
|
Set to display block |
|
*/ |
|
.slides_container div { |
|
width:470px; |
|
height:170px; |
|
display:block; |
|
} |
|
|
|
/* |
|
Optional: |
|
Reset list default style |
|
*/ |
|
.pagination { |
|
list-style:none; |
|
margin:0; |
|
padding:0; |
|
} |
|
|
|
/* |
|
Optional: |
|
Show the current slide in the pagination |
|
*/ |
|
.pagination .current a { |
|
color:red; |
|
} |
|
</style> |
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> |
|
<script src="js/slides.min.jquery.js"></script> |
|
|
|
<script> |
|
$(function(){ |
|
$('#slides').slides({ |
|
preload: true, |
|
generateNextPrev: true |
|
}); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<div id="slides"> |
|
<div class="slides_container"> |
|
<div> |
|
<h1>Slide 1</h1> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
|
</div> |
|
<div> |
|
<h1>Slide 2</h1> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
|
</div> |
|
<div> |
|
<h1>Slide 3</h1> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
|
</div> |
|
<div> |
|
<h1>Slide 4</h1> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
|
