Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

143 lines (132 sloc) 2.965 kB
<!DOCTYPE html>
<html>
<head>
<title>simpleCarousel</title>
<style>
.simpleCarouselContainer {
margin:20px;
padding:20px;
position:relative;
}
ul {
margin:0;
padding:0;
}
ul > li {
background:red;
color:#fff;
font-size:2em;
list-style-type:none;
margin:0;
padding:0;
text-align:center;
}
ul > li+li {
background:green;
}
ul > li+li+li {
background:blue;
}
ul > li+li+li+li {
background:magenta;
}
ul > li+li+li+li+li {
background:cyan;
}
ul > li+li+li+li+li+li {
background:yellow;
}
ul > li+li+li+li+li+li+li {
background:brown;
}
ul > li+li+li+li+li+li+li+li {
background:orange;
}
ul > li+li+li+li+li+li+li+li+li {
background:purple;
}
ul > li+li+li+li+li+li+li+li+li+li {
background:black;
}
.simpleCarouselContainer .simpleCarouselNext {
bottom:-10px;
position:absolute;
right:20px;
}
.simpleCarouselContainer .simpleCarouselPrev {
bottom:-10px;
left:20px;
position:absolute;
}
</style>
</head>
<body>
<ul class="one">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<ul class="two">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<ul class="three">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simpleCarousel.js"></script>
<script type="text/javascript">
$(function() {
// Options (defaults):
// width:'auto',
// height:'auto',
// showItems:1,
// animationSpeed:250,
// loop:false
$('.one').simpleCarousel({
width:640,
height:480,
showItems:1,
loop:true,
customClass:'carousel_one'
});
$('.two').simpleCarousel({
width:214,
height:200,
showItems:3,
loop:false
});
$('.three').simpleCarousel({
width:320,
height:100,
showItems:2,
loop:false
});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.