Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
<div id="slider">  
  
  <div id="slider_cont">
    <div id="slide">
      <div class="test">1</div>
      <div class="test">2</div>
      <div class="test">3</div>
      <div class="test">4</div>
      <div class="test">5</div>
      <div class="test">6</div>
      <div class="test">7</div>
      <div class="test">8</div>
      <div class="test">9</div>
      <div class="test">10</div>
    </div>    
  </div>
  
  <div id="dots"><!--leave empty--></div>
  
</div>
  
  
  
  
</body>
</html>
​
 
///////////// gallery by roXon //////////////
var steps = 10,  // SET DESIRED n OF STEPS
    delay = 3500,// SET DESIRED DELAY
    galW = $('#slider_cont').width(),
    c = 0,      // counter
    intv;       // interval
​
// generate dots
for(i=0;i<steps;i++){
 $('#dots').append('<div class="dot" />'); 
}
$('#dots .dot').eq(c).addClass('active');
​
// ANIMATIONS function
function anim(){
  c=c%steps; // reset counter to '0' if greater than steps
  $('#slide').stop().animate({left: '-'+galW*c},800);
  $('#dots .dot').removeClass('active').eq(c).addClass('active');
}
​
// AUTO SLIDE function
function auto(){
  intv = setInterval(function(){
    c++; anim();
  },delay);
}
auto(); // kick auto slide
​
// PAUSE slider on mouseenter
$('#slider').on('mouseenter mouseleave',function(e){
  var evt = e.type=='mouseenter'? clearInterval(intv) : auto();
});
​
// CLICK dots to animate
$('#dots').on('click','.dot',function(){
  c=$(this).index(); anim();
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers