Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (145 sloc) 7.39 KB
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carousel Plugin</title>
<meta name="description" content="There are many like it, but this one is mine." />
<style type="text/css" media="screen">
ul { margin: 0; padding: 0; list-style: none; }
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled { color: #aaa; }
.slidewrap2 .carousel-tabs {
padding: 0;
margin: 1em 0;
clear: both;
}
.slidewrap2 .carousel-tabs li {
display: inline-block;
padding: 0 2px;
}
.slidewrap2 .carousel-tabs a {
background: #ddd;
display: inline-block;
height: 10px;
text-indent: -9999px;
width: 10px;
border-radius: 5px;
}
.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a {
display: block;
float: left;
}
.slidewrap2 .carousel-tabs .carousel-active-tab a {
background: #777;
}
</style>
</head>
<body>
<div class="slidewrap" data-autorotate="2000">
<ul class="slidecontrols">
<li><a href="#sliderName" class="next">Next</a></li>
<li><a href="#sliderName" class="prev">Prev</a></li>
</ul>
<ul class="slider" id="sliderName">
<li class="slide">
<h2 class="slidehed">First Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
</li>
<li class="slide">
<h2 class="slidehed"><a href="#">Second Slide</a></h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
</li>
<li class="slide">
<h2 class="slidehed">Third Slide</h2>
<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
</li>
<li class="slide">
<h2 class="slidehed"><a href="#">Fourth Slide</a></h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
</li>
<li class="slide">
<h2 class="slidehed">Fif' Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
</li>
</ul>
</div>
<div class="slidewrap2">
<ul class="slider">
<li class="slide">
<h2>First Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
</li>
<li class="slide">
<h2>Second Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
</li>
<li class="slide">
<h2>Third Slide</h2>
<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
</li>
<li class="slide">
<h2>Fourth Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
</li>
<li class="slide">
<h2>Fif' Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
</li>
</ul>
</div>
<div class="slidewrap3">
<ul class="slider">
<li class="slide">
<h2>First Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
</li>
<li class="slide">
<h2>Second Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
</li>
<li class="slide">
<h2>Third Slide</h2>
<p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
</li>
<li class="slide">
<h2>Fourth Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
</li>
<li class="slide">
<h2>Fif' Slide</h2>
<p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="plugin.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: true,
addNav : false
});
$('.slidewrap2').carousel({
slider: '.slider',
slide: '.slide',
addNav: false,
addPagination: true,
speed: 300 // ms.
});
$('.slidewrap3').carousel();
});
</script>
</body>
</html>
Something went wrong with that request. Please try again.