Skip to content

Instantly share code, notes, and snippets.

@marcosrivasr
Created February 28, 2011 03:47
Show Gist options
  • Save marcosrivasr/846909 to your computer and use it in GitHub Desktop.
Save marcosrivasr/846909 to your computer and use it in GitHub Desktop.
Este código lo pegas dentro de la etiqueta Body
<div id="wrappera">
<div id="slider">
<div class="inslider">
<!-- Content holder will hold content -->
<div class="contentholder">
<div class="contentslider">
<div class="contenta">
<h1>Welcome to Content Slider Demo</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="contenta">
<h1>Welcome to Content Slider Demo 2</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="contenta">
<h1>Welcome to Content Slider Demo 3</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
<div class="contenta">
<h1>Welcome to Content Slider Demo 4</h1>
<p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
</div>
</div>
</div>
<!-- Navigation for content slider -->
<div class="contentnav">
<a rel="1" href="#">1</a>
<a rel="2" href="#">2</a>
<a rel="3" href="#">3</a>
<a rel="4" href="#">4</a>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
//Activate First Link
$(".contentnav a:first").addClass("active");
//width of a single content area
var contentwidth = $(".contentholder").width();
//Total number of content
var totalcontent = $(".contenta").size();
//Total width of all content area
var allcontentwidth = contentwidth * totalcontent;
//contentslider to new size which we got in above step
$(".contentslider").css({'width' : allcontentwidth});
//Now right a new function for slide and slide navigation
rotate = function(){
//Number of times we need to slide
var slideid = $active.attr("rel") - 1;
//Set the distance which single content needs to slide
var slidedistance = slideid * contentwidth;
//Remove active class
$(".contentnav a").removeClass('active');
//Add Active Class
$active.addClass('active');
//Slider Animation
$(".contentslider").animate({
left: -slidedistance
}, 500 );
};
//Set Time for Rotation of slide
rotation = function(){
play = setInterval(function(){
//Next slide nav
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Move to first slide nav
$active = $('.contentnav a:first');
}
rotate();
//Timer speed 5 sec
}, 5000);
};
//Run rotation fuction
rotation();
$(".contentnav a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment